Tooltip

A small floating text label that appears next to its trigger on hover or keyboard focus. Never contains interactive content.

Installation

npx dafink-ui add tooltip

Demo

Props

Name	Type	Default	Description
content	ReactNode	-	The tooltip text. Must be non-interactive content only.
children	ReactElement	-	A single trigger element; receives hover/focus handlers and aria-describedby automatically.
side	'top' \| 'right' \| 'bottom' \| 'left'	'top'	Which side of the trigger the tooltip appears on.
delay	number	300	Open delay in milliseconds for hover. Keyboard focus shows the tooltip immediately.
className	string	''	Additional classes on the wrapper span.

Accessibility

Tooltip never receives or manages focus itself — the trigger keeps native focus throughout, gains aria-describedby pointing at the tooltip while it's shown, and the tooltip element carries role="tooltip". It shows on hover (after `delay`ms) and on keyboard focus (immediately, no delay), and must never contain interactive content.

Key	Function
`tab`	Moves native focus to the trigger, which shows the tooltip immediately (no delay).
`shift`+`tab`	Moves focus off the trigger, which hides the tooltip on blur.
`escape`	Dismisses the tooltip, whether it was shown by hover or focus.