Tooltip

Usage

A short label revealed on hover or focus. Implemented in pure CSS, with no state and no positioning library — which keeps it free but also caps what it can do, so it is strictly for a few words of clarification.

import { Tooltip } from '@summonware/ui';

Best practices

DoUse it to name icon-only controls. That is the case where it earns its keep.

DoSet `side="bottom"` for triggers near the top of the viewport, where a top tooltip would be clipped.

Don'tPut essential information in a tooltip. It is invisible on touch devices and to many assistive tech users.

Don'tPut interactive content inside one — it cannot be hovered into. That is a Popover, which is not built yet.

Examples

Common configurations, variations and states.

Placement

Above by default, below when the trigger sits near the top of the viewport.

Naming icon buttons

The case this component is really for — a toolbar of glyphs that would otherwise be a guessing game.

Reference variants

1 of 2 labels from the reference are demonstrated above.

TooltipPopover