Tooltip
A short label with an arrow, beside the control it describes, legible over any background in either theme.
-
.aparte-tabs--segmented
On this page
<span class="aparte-tooltip-anchor" style="margin-block-start: 2.5rem; margin-inline-start: 5rem">
<div class="aparte-tooltip" data-side="top" role="tooltip">
Copy to clipboard
<span class="aparte-tooltip__arrow"></span>
</div>
<button class="aparte-btn aparte-btn--icon" aria-label="Copy"><aparte-icon name="copy"></aparte-icon></button>
</span>.aparte-tooltip is a short label in a dark chip with an arrow. Its colours are fixed rather
than themed, on purpose: it has to stay legible over whatever it covers, a bright image or a dark
code block, in either theme.
Wrap the trigger and the tooltip in .aparte-tooltip-anchor and set data-side (top,
bottom, start or end): the tooltip sits on that side, --aparte-tooltip-gap away, with its
arrow turned to match. Showing it on hover and focus is your script’s or your CSS’s, and so is
keeping it on screen near an edge. It never catches the pointer itself.
Customize
Section titled “Customize”| Variable | Default |
|---|---|
--aparte-tooltip-shadow | 0 2px 8px rgba(0, 0, 0, 0.12) |
--aparte-tooltip-gap | var(--aparte-space-3) |
--aparte-tooltip-bg | var(--aparte-text) |
--aparte-tooltip-color | var(--aparte-text-inverse) |
--aparte-tooltip-max-width | — |
Classes
Section titled “Classes”.aparte-tabs--segmented · .aparte-tabs__tab · .aparte-tooltip · .aparte-tooltip-anchor · .aparte-tooltip__arrow
Accessibility
Section titled “Accessibility”- Give the tooltip
role="tooltip"and an id, and point the trigger at it witharia-describedby; show it on focus as well as on hover, and hide it on Escape. - A tooltip is a hint: anything the reader must know belongs in the page.