Tooltip

Exports

@mbsw/ui에서 가져올 수 있는 항목입니다.

Tooltip
TooltipContent
TooltipProvider
TooltipTrigger

Props

컴포넌트별 주요 속성입니다. 조건부 속성의 조합과 공통 HTML, Radix 속성은 아래 전체 타입에서 확인하세요.

TooltipContent

TooltipContent 속성
PropType필수 여부
side'bottom' | 'top' | 'left' | 'right'선택
sideOffset3 | 4 | 6선택
childrenNonEmptyTooltipChild | string | boolean | null조건부
shortcutstring조건부
trailingReactNode조건부
asChildfalse조건부
aria-label

A more descriptive label for accessibility purpose

string조건부

TooltipProvider

TooltipProvider 속성
PropType필수 여부
delay'default' | 'long'선택

Type reference

전체 타입 보기

속성 조합과 상속 속성을 포함한 TypeScript 선언입니다.

import { type ComponentProps, type ReactNode } from 'react';

import { type Tooltip as OfficialTooltipPrimitive } from 'radix-ui';

export type TooltipDelay = 'default' | 'long';

type TooltipPrimitiveProviderProps = ComponentProps<typeof OfficialTooltipPrimitive.Provider>;

export type TooltipProviderProps = Omit<TooltipPrimitiveProviderProps, 'delayDuration' | 'disableHoverableContent' | 'skipDelayDuration'> & {
    delay?: TooltipDelay;
};

type TooltipPrimitiveRootProps = ComponentProps<typeof OfficialTooltipPrimitive.Root>;

export type TooltipProps = Omit<TooltipPrimitiveRootProps, 'delayDuration' | 'disableHoverableContent'>;

export type TooltipTriggerProps = ComponentProps<typeof OfficialTooltipPrimitive.Trigger>;

type NonEmptyTooltipChild = Exclude<ReactNode, boolean | null | undefined>;

type TooltipPrimitiveContentProps = ComponentProps<typeof OfficialTooltipPrimitive.Content>;

type TooltipSide = 'bottom' | 'top' | 'left' | 'right';

type TooltipSideOffset = 3 | 4 | 6;

type TooltipContentBaseProps = Omit<TooltipPrimitiveContentProps, 'avoidCollisions' | 'children' | 'side' | 'sideOffset'> & {
    side?: TooltipSide;
    sideOffset?: TooltipSideOffset;
};

type TooltipContentLegacyProps = TooltipContentBaseProps & {
    children: NonEmptyTooltipChild;
    shortcut?: undefined;
    trailing?: undefined;
};

type TooltipContentShortcutProps = TooltipContentBaseProps & {
    children: string;
    shortcut?: string;
    trailing?: undefined;
};

type TooltipContentTrailingProps = Omit<TooltipContentBaseProps, 'asChild'> & {
    asChild?: false;
    shortcut?: undefined;
    trailing: ReactNode;
} & ({
    children: NonEmptyTooltipChild;
} | {
    children?: boolean | null;
    'aria-label': string;
});

export type TooltipContentProps = TooltipContentLegacyProps | TooltipContentShortcutProps | TooltipContentTrailingProps;

export declare function TooltipProvider(props: TooltipProviderProps): import("react").JSX.Element;

export declare function Tooltip(props: TooltipProps): import("react").JSX.Element;

export declare function TooltipTrigger(props: TooltipTriggerProps): import("react").JSX.Element;

export declare function TooltipContent({ align, alignOffset, children, className, forceMount, shortcut, side, sideOffset, trailing, ...props }: TooltipContentProps): import("react").JSX.Element;