Tooltip

Exports

Import these components from @mbsw/ui.

Tooltip

TooltipContent

TooltipProvider

TooltipTrigger

Props

The tables list common props for each component. See the full types for supported prop combinations and inherited HTML and Radix props.

TooltipContent

TooltipContent props
Prop	Type	Requirement
`side`	`'bottom' \| 'top' \| 'left' \| 'right'`	Optional
`sideOffset`	`3 \| 4 \| 6`	Optional
`children`	`NonEmptyTooltipChild \| string \| boolean \| null`	Conditional
`shortcut`	`string`	Conditional
`trailing`	`ReactNode`	Conditional
`asChild`	`false`	Conditional
`aria-label` A more descriptive label for accessibility purpose	`string`	Conditional

TooltipProvider

TooltipProvider props
Prop	Type	Requirement
`delay`	`'default' \| 'long'`	Optional

Type reference

Show full types

Full TypeScript definitions, including prop combinations and inherited props.

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;