Tooltip

Overlay

A floating label that appears when hovering over or focusing on an element. Provides contextual information and help text with accessibility support.

Installation

bash

1npx @dinachi/cli@latest add tooltip

Run the CLI command above to automatically install the component and its dependencies.

Prop	Type	Default	Description
`variant`	`'default' \| 'inverse'`	`'default'`	The visual style variant of the tooltip
`openDelay`	`number`	`700`	The delay in milliseconds before opening
`closeDelay`	`number`	`300`	The delay in milliseconds before closing
`side`	`'top' \| 'right' \| 'bottom' \| 'left'`	`'top'`	The preferred side of the trigger to render against
`sideOffset`	`number`	`4`	The distance in pixels from the trigger
`showArrow`	`boolean`	`true`	Whether to show the tooltip arrow