║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║

---

title: Tooltip description: A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it. author: name: imskyleen url: https://github.com/imskyleen

<ComponentPreview name="demo-components-radix-tooltip" />

Installation

<ComponentInstallation name="components-radix-tooltip" />

Usage

<Tooltip>
  <TooltipTrigger>Open tooltip</TooltipTrigger>
  <TooltipContent>
    <p>Tooltip content</p>
  </TooltipContent>
</Tooltip>

API Reference

Tooltip

<div className="flex flex-col gap-2"> <ExternalLink href="https://animate-ui.com/docs/components/radix/tooltip#tooltip" text="Animate UI API Reference - Tooltip Component" />

<ExternalLink href="https://www.radix-ui.com/primitives/docs/components/tooltip#root" text="Radix UI API Reference - Tooltip.Root" />

</div>

<TypeTable type={{ delayDuration: { description: 'Override the duration given to the Provider to customise the open delay for a specific tooltip.', type: 'number', required: false, default: '0', }, }} />

TooltipTrigger

<div className="flex flex-col gap-2"> <ExternalLink href="https://animate-ui.com/docs/components/radix/tooltip#tooltiptrigger" text="Animate UI API Reference - TooltipTrigger Component" />

<ExternalLink href="https://www.radix-ui.com/primitives/docs/components/tooltip#trigger" text="Radix UI API Reference - Tooltip.Trigger" />

</div>

TooltipContent

<div className="flex flex-col gap-2"> <ExternalLink href="https://animate-ui.com/docs/components/radix/tooltip#tooltipcontent" text="Animate UI API Reference - TooltipContent Component" />

<ExternalLink href="https://www.radix-ui.com/primitives/docs/components/tooltip#content" text="Radix UI API Reference - Tooltip.Content" />

</div>

<TypeTable type={{ transition: { description: 'The transition of the tooltip content.', type: 'Transition', required: false, default: "{ type: 'spring', stiffness: 300, damping: 25 }", }, '...props': { description: 'The props of the tooltip content.', type: 'HTMLMotionProps<"div">', required: false, }, }} />

<Callout type="info"> The `forceMount` and `asChild` properties are not supported in the `TooltipContent` component, as it is used for animation. </Callout>

Credits

• Radix UI Tooltip
• Credit to shadcn/ui for style inspiration.

║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║