Tooltip

Copy MarkdownOpen

Example

Features

The HTML title attribute can be used to create a tooltip, but it cannot be styled. Custom styled tooltips can be hard to build in an accessible way. TooltipTrigger and Tooltip help build fully accessible tooltips that can be styled as needed.

• Styleable – States for entry and exit animations are included for easy styling, and an optional arrow element can be rendered.
• Accessible – The trigger element is automatically associated with the tooltip via aria-describedby. Tooltips are displayed when an element receives focus.
• Hover behavior – Tooltips display after a global delay on hover of the first tooltip, with no delay on subsequent tooltips to avoid unintended flickering. Emulated hover events on touch devices are ignored.
• Positioning – The tooltip is positioned relative to the trigger element, and automatically flips and adjusts to avoid overlapping with the edge of the browser window.

Installation

npm install react-aria-components tw-animate-css tailwindcss-react-aria-components class-variance-authority lucide-react clsx tailwind-merge motion

npx libravelui@latest add tooltip

Anatomy

import {
  Tooltip,
  TooltipContent,
  TooltipTrigger,
} from "@/components/ui/core/tooltip";

<Tooltip>
  <TooltipTrigger tone="unstyled">
    <Badge tone="info">Settings</Badge>
  </TooltipTrigger>
  <TooltipContent tone="info">
    Customize workspace behavior, themes, and integrations.
  </TooltipContent>
</Tooltip>

Props

Loading types…