Getting Started
Foundations
Components
Tooltip
A floating label that appears on hover or focus to provide supplementary information about an element.
#Installation
npx @dinachi/cli@latest add tooltip#Usage
tsx
import { TooltipProvider, Tooltip, TooltipTrigger, TooltipContent } from '@/components/ui/tooltip'#Examples
Default Tooltip
A basic tooltip on a button
Tooltip Positions
Tooltips placed on different sides of the trigger
Tooltip Variants
Default and inverse tooltip visual styles
#API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | 'default' | 'inverse' | 'default' | The visual style variant of the tooltip |
| openDelay | number | 700 | The delay in milliseconds before the tooltip opens |
| closeDelay | number | 300 | The delay in milliseconds before the tooltip closes |
| side | 'top' | 'right' | 'bottom' | 'left' | 'top' | The preferred side of the trigger to render the tooltip |
| sideOffset | number | 4 | The distance in pixels from the trigger |
| showArrow | boolean | true | Whether to show the tooltip arrow pointing to the trigger |