Tooltip

Short hint that appears on hover or focus. Four positions (top, bottom, left, right) with a directional arrow caret. Default 300ms delay on mouse hover so accidental hovers don't trigger; keyboard focus shows instantly. Opens with a fade and slide.

a11y (built in): the bubble gets a generated id plus role="tooltip", and the wrapper's first child — the trigger — gets aria-describedby pointing at it, so the hint is a description and never the accessible name; icon-only triggers still need their own aria-label (every demo below carries one). Keyboard focus shows the tooltip immediately while hover waits 300ms (data-lb-tooltip-delay overrides per instance, 0 for instant), and the surface is pointer-events: none so it never intercepts a click meant for the trigger underneath.

When NOT to use: tooltips are hidden from touch users (no hover events) and from screen readers that don't follow aria-describedby. Don't put essential information here. Use for icon-only buttons, kbd shortcuts, optional context. Usage: Wrap a trigger + .lb-tooltip in <span class="lb-tooltip-wrap" data-lb-tooltip>. Override delay with data-lb-tooltip-delay="600".

Positions

Four directional placements with arrow carets pointing back at the trigger.

Icon-only buttons

The most common tooltip use case — give an icon-only control a discoverable name. The aria-label on the button is what assistive tech reads; the tooltip is the visual reinforcement for sighted users.

With keyboard shortcut

Add a .lb-tooltip__kbd after the label to surface the shortcut for power users.

Small variant + multi-line

Add --small for tighter padding (compact toolbars). Tooltips wrap automatically when content exceeds 15rem; default text-align is centered for that case.