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

---

title: Tooltip description: A tooltip is a small box that appears when hovering over an element. author: name: imskyleen url: https://github.com/imskyleen

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

Installation

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

Usage

<TooltipProvider>
  <Tooltip>
    <TooltipTrigger>Hover</TooltipTrigger>
    <TooltipContent>
      <p>Tooltip content</p>
    </TooltipContent>
  </Tooltip>

  <Tooltip>
    <TooltipTrigger>And me</TooltipTrigger>
    <TooltipContent>
      <p>Tooltip content</p>
    </TooltipContent>
  </Tooltip>
</TooltipProvider>

API Reference

TooltipProvider

<ExternalLink href="https://animate-ui.com/react/primitives/animate/tooltip#tooltipprovider" text="Animate UI API Reference - TooltipProvider Primitive" />

<TypeTable type={{ children: { description: 'The children of the TooltipProvider component.', type: 'React.ReactNode', required: true, }, openDelay: { description: 'The delay in milliseconds before the tooltip is shown.', type: 'number', required: false, default: '0', }, closeDelay: { description: 'The delay in milliseconds before the tooltip is hidden.', type: 'number', required: false, default: '300', }, transition: { description: 'The transition of the tooltip.', type: 'Transition', required: false, default: '{ type: "spring", stiffness: 300, damping: 35 }', }, }} />

Tooltip

<ExternalLink href="https://animate-ui.com/react/primitives/animate/tooltip#tooltip" text="Animate UI API Reference - Tooltip Primitive" />

<TypeTable type={{ children: { description: 'The children of the Tooltip component.', type: 'React.ReactNode', required: true, }, side: { description: 'Which side of the anchor element to align the popup against.', type: 'Side', required: false, default: 'top', }, sideOffset: { description: 'The distance in pixels from the trigger.', type: 'number', required: false, default: '10', }, align: { description: 'How to align the popup relative to the specified side.', type: 'Align', required: false, default: 'center', }, alignOffset: { description: 'An offset in pixels from the specified alignment.', type: 'number', required: false, default: '0', }, }} />

TooltipTrigger

<ExternalLink href="https://animate-ui.com/react/primitives/animate/tooltip#tooltiptrigger" text="Animate UI API Reference - TooltipTrigger Primitive" />

<TypeTable type={{ asChild: { description: 'Whether to render the children as a child of the trigger.', type: 'boolean', required: false, default: 'false', }, '...props': { description: 'The props of the TooltipTrigger component.', type: 'HTMLMotionProps<"div">', required: false, }, }} />

TooltipContent

<ExternalLink href="https://animate-ui.com/react/primitives/animate/tooltip#tooltipcontent" text="Animate UI API Reference - TooltipContent Primitive" />

<TypeTable type={{ layout: { description: 'Whether to animate the content.', type: 'boolean | "position" | "size" | "preserve-aspect"', required: false, default: 'preserve-aspect', }, '...props': { description: 'The props of the TooltipContent component.', type: 'HTMLMotionProps<"div">', required: false, }, }} />

Credits

• Credit to shadcn/ui for style inspiration.

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