Tooltip

A short label that names a control on hover, focus or long press, in Ink, Soft or a rich tab shape.

FreeWeb and MobileMotion

npx shadcn add @fetaui/tooltip

Playground

Sides

Ink

Soft

Rich

In context

Q3 planning review final notes.pdf2.4 MB

Tone

Side

Kind

Icons animation

Motion

Installation

Terminal· bash

1 npx shadcn add @fetaui/tooltip

Top by default. It flips on its own near an edge.

Tone

role tooltip, tied to the trigger with aria-describedby, or aria-labelledby when labels is set.
It stays open while the pointer is over it, so it can be read and selected.
A disabled button cannot take hover: wrap it in TooltipDisabledTrigger.
Mobile shows on long press and hides 1.5 s after release.

Shows in 140 ms from 0.96 and 4 px toward the trigger, with its origin at the nub. Hides with a 90 ms fade.
Inside the 300 ms skip window a neighbour shows at once and glides over on a 500/36 spring.
Rich unfolds the tab, then the tray 40 ms later.
With reduced motion, it appears in place. The loading shimmer holds still.

Nothing mounts until it opens. A hidden first pass measures the panel, then it animates in on its final side.
One module level slot tracks the open tooltip, so a neighbour takes over at once and panels never stack.
Scrolling the page closes it, and timers and listeners are cleared on close or unmount.

Give your coding assistant the Markdown reference instead of screenshots.

Import Tooltip, TooltipRich, TooltipDisabledTrigger and TooltipTruncated from @/components/fetaui/tooltip after installing it.
children must be one element that takes a ref and pointer props. Wrap a disabled control in TooltipDisabledTrigger.
Set labels when the tooltip is the trigger's name, as on an icon only button.
TooltipRich takes any side. Top and bottom pin the nub under the title tab, left and right center the panel on the trigger. Composes Kbd, Skeleton and the shared Floating layer.