Tooltip
Attribute-driven. Shows on hover and keyboard focus after a short delay.
Examples
Tooltips
Anatomy
[data-tip] | Any element. The text is drawn by its ::after, above it by default, wrapping at 20rem. |
API
| Attribute | Values | Description |
|---|---|---|
data-tip | <text> | The tooltip text. Shown after --ae-duration-slow of hover or keyboard focus, faded out at once. Wraps past 20rem or the viewport width. |
data-tip-side | bottomend | Where it sits. Default above. |
data-tip-dismissed | boolean | Hides the tip while the element stays hovered or focused. aequitas.js sets it on Esc and clears it once pointer and focus have left. |
Behaviour
Esc hides the tip under the pointer or focus until both have left the element. Each [data-tip] gets its text as aria-description, kept in step when the text changes, unless it has one of its own. Without aequitas.js the tip still shows on hover and focus, but Esc does nothing and screen readers don't hear it.
From aequitas.js. It initialises itself and enhances markup added later on its own, so it works the same in an SPA.
Accessibility
- It shows on
:focus-visible, so it only reaches keyboard users on focusable elements. - The drawn text is left out of the accessible name; aequitas.js exposes it as the element's description instead, read after the name. Keep the label itself in the element (or
aria-label): the tip is a hint, not the name. - Hover it and the pointer can travel onto the tip without it closing; Esc closes it without moving pointer or focus.
- Nothing shows on touch. Don't hide information only there.
- It is positioned against the element, so an
overflow: hiddenancestor can clip it. Hidden, it takes no space and never widens the page.
| Key | Effect |
|---|---|
| Esc | Hides the tip of the hovered or focused element. |