Tooltips
data-tooltip — hover and focus-visible labels, CSS only, no JavaScript
Add data-tooltip to any element. Appears above on hover
or keyboard focus. No JavaScript.
Basic
The term
data-tooltip
renders above by default. Works on
HTML,
code, or plain text
spans.
Bottom placement
Use data-tooltip-position="bottom" when the element is
near the top of the page.
This tooltip appears below the element.
On interactive elements
Pair data-tooltip with aria-label on
buttons so screen readers get the full description.
In prose
data-tooltip annotates terms inline without cluttering
the reading flow:
The ASW framework uses data attributes instead of class names. The Pico layer handles base styling.