overlays
Tooltip
A short description of a control that appears on hover and keyboard focus.
Rich widgetNeeds a script for its behavior.
Usage
Wrap the trigger and the tooltip in ca-tooltip. The trigger points at the tooltip with aria-describedby.
<!-- The padding leaves room for the tooltip, which opens above the button. -->
<div class="pt-12">
<span class="ca-tooltip">
<button class="ca-button ca-button--outline ca-button--md" type="button" aria-describedby="copy-link-tip">Copy link</button>
<span class="ca-tooltip__content" role="tooltip" id="copy-link-tip">Anyone with the link can see the lesson</span>
</span>
</div>Examples
On an icon button
An icon button names itself with aria-label; the tooltip shows the same words for sighted people.
<!-- The padding leaves room for the tooltip, which opens above the button. -->
<div class="pt-12">
<span class="ca-tooltip">
<button class="ca-button ca-button--ghost ca-button--md" type="button" aria-label="Print the schedule" aria-describedby="print-tip">
<svg aria-hidden="true" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 9V2h12v7" /><path d="M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2" /><path d="M6 14h12v8H6z" /></svg>
</button>
<span class="ca-tooltip__content" role="tooltip" id="print-tip">Print the schedule</span>
</span>
</div>Guidance and accessibility
When to use
- Use a tooltip for a short hint about a control, such as what an icon button does or what a setting changes.
- Never put information people need only in a tooltip: touch screens have no hover. Anything essential belongs on the page.
- Keep it to one short sentence without links or buttons. For interactive content, use a popover.
Accessibility
- The tooltip shows while the pointer is over the trigger or the tooltip, and while the trigger has keyboard focus. People can move the pointer onto it without it closing.
- Escape hides it without moving focus or the pointer (WCAG 1.4.13); this
needs
ca-tooltip.js. Without the script it still shows and hides with hover and focus. - Connect it with
aria-describedby, so screen readers read it after the trigger’s name. - It opens above the trigger and does not flip, so leave room above triggers near the top of a scrolling container.
Classes
Generated from the component contract. Parts use __, modifiers use --.
| Class | Kind | Use it for |
|---|---|---|
ca-tooltip | Component | Wrapper around the trigger and its tooltip. |
ca-tooltip__content | Part | The role="tooltip" text, shown centered above the trigger. |
Skins
The same markup, dressed by each skin. Structure and behavior stay the same; only the look changes.
Base skin
Neutral grayscale starting point; product skins extend it and change what differs.
Calaca skin
The Calaca UI brand: hueso paper and tinta ink, cempasúchil marigold, rosa and jade.
Proof skin
Pilot skin pushed far from base: square, heavy, offset shadows, larger targets.
Crossview skin
The CrossView proofing table: cool ground, bond-paper sheets, rule-grey hairlines, one red mark.
Framework notes
Link the prebuilt stylesheet of your skin next to your brand theme. No build step.
<link rel="stylesheet" href="theme.css" />
<link rel="stylesheet" href="ca-base.css" />In Astro, Vite and other Tailwind projects, import Calaca after Tailwind and your theme in your main stylesheet.
@import "tailwindcss";
@import "./theme.css";
@import "@calaca/ui/core.css";
@import "@calaca/ui/skins/base.css";Same stylesheet as above; write the classes in className.
<button className="ca-button ca-button--primary ca-button--md" type="button">Save changes</button>Load the tooltip script once per page, so Escape can dismiss a tooltip. In Astro or Next.js, import @calaca/ui/behavior/tooltip once in the layout.
<script type="module" src="ca-tooltip.js"></script>