Overlays

Instant Hint Tooltip

A small label that fades and scales into view beside an element on hover or keyboard focus, giving a quick hint without adding visible clutter.

Using Instant Hint Tooltip

A small label that fades and scales into view beside an element on hover or keyboard focus, giving a quick hint without adding visible clutter.

Try the live preview with a pointer and keyboard, then check focus visibility and the narrow layout in your own page. Use the plate number or slug when asking your coding agent to fetch this component.

Props: openDelay, side, accentColor

Which frameworks are available?

The catalog lists these versions: react, vue, svelte, astro, html. The live preview on this page runs React.

How do I access the implementation?

The code, framework versions and installation commands are available in the workbench above.

Connect your agent

Nearby

2137Cursor-chasing tooltipOverlaysA hint bubble that pops in on hover or focus and can glide to trail the pointer as it moves across the trigger.

2458Underline hint tooltipOverlaysA dotted-underline word that reveals a short hint bubble above or below it on hover or keyboard focus, driven entirely by CSS.

1960Flip Side Hint TooltipOverlaysA hint bubble that appears on hover or keyboard focus and automatically flips to whichever side keeps it fully visible near the edge of the screen.

2214Resizing hint tooltipOverlaysA hover label whose bubble smoothly resizes itself when its text is longer or shorter, instead of snapping between sizes.

1910Anchored detail popoverOverlaysA trigger button that opens a small anchored panel holding a titled settings form, growing out of the trigger's edge and closing on Escape or an outside click.

2257Toolbar icon tooltipOverlaysA row of icon-only toolbar buttons that pop a small arrow-pointed label near whichever one is hovered or focused.