Tooltip

A floating label that appears on hover or focus to provide supplementary information about an element.

#Installation

npx @dinachi/cli@latest add tooltip

tsx

import { TooltipProvider, Tooltip, TooltipTrigger, TooltipContent } from '@/components/ui/tooltip'

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
TooltipTrigger.closeOnClick	boolean	true	Whether clicking the trigger dismisses the tooltip. Set to false to keep the tooltip open on click.