Tooltips

Contextual text overlays that appear on hover or focus to provide additional information.

A simple tooltip that appears on hover.

Default tooltip

Tooltip with a visible arrow pointing to the trigger element.

With arrow

Light-themed tooltip for dark backgrounds.

Light tooltip

Positions

Tooltips can be positioned on any side of the trigger.

Top

Bottom

Left

Right

Tooltip with a scale and fade entrance animation.

Animated tooltip

Tooltip that slides up from below its resting position.

Slide up

Uses group/tooltip and transition-delay to prevent flicker on quick mouse movements.

Delayed tooltip

Class	Purpose
`group relative`	Container that triggers hover state
`pointer-events-none`	Prevents tooltip from blocking clicks
`opacity-0 group-hover:opacity-100`	Show/hide on hover
`transition-opacity`	Smooth fade animation
`transition-all`	Animate position + opacity
`delay-300`	300ms delay before showing
`scale-95 group-hover:scale-100`	Scale entrance effect
`-top-10 left-1/2 -translate-x-1/2`	Top-center positioning

Keep text short - Tooltips should be 1-5 words, not paragraphs
Don't hide critical info - Tooltips are supplementary, not essential
Consistent positioning - Use the same position for tooltips in a group
Add delay for dense UIs - Prevents tooltip flicker when moving between elements
Accessible triggers - Use <button> or focusable elements as triggers
Mobile fallback - Tooltips rely on hover; provide alternatives on touch devices