Tooltip
The shared tooltip attaches brief, non-interactive context to a focusable trigger. CSS handles hover and focus; scoped JavaScript adds tap toggling, outside dismissal, and Escape dismissal.
Example#
Response time Measured at the application edge.
When to use#
- Use a tooltip for a short hint that clarifies a control, abbreviation, or truncated value
- Never put essential information only in a tooltip; the page must work without it
- Not for interactive content — links or buttons inside the bubble need a disclosure, not a tooltip
Implementation#
{{ partial "tooltip.html" (dict
"id" "response-time-tooltip"
"label" "Explain response time"
"trigger" "Response time"
"content" "Measured at the application edge."
) }}Omit trigger to render the default information icon. The trigger refers to the tooltip through aria-describedby; the script only manages explicit dismissal state and never moves focus. Markdown pages use the tooltip shortcode.
Options#
| Option | Purpose |
|---|---|
id | Required unique ID for the tooltip content |
label | Required accessible name for the trigger |
trigger | Optional visible trigger text; omission renders the info icon |
content | Required short, non-interactive plain text |
Interface manifest
- Kind
- Component
- Category
- Content
- Status
- Implemented
- Implementation
- Partial:
layouts/partials/tooltip.htmlShortcode:layouts/shortcodes/tooltip.htmlCSS:assets/css/site.cssJavaScript:assets/js/site.js - Related interfaces
- Tooltip
Accessibility#
- The trigger is a native button and the tooltip appears on keyboard focus as well as hover
aria-describedbyconnects the trigger to content carryingrole="tooltip"- Escape dismisses the tooltip without moving focus; tapping the trigger or outside it also closes the explicit touch state
- Tooltip content is plain text and contains no focusable controls