Components
Tooltip
A short hint on hover or focus: add data-tooltip to any element with .ct-tooltip.
Live example
Rendered with the real classes from /site/chitransit.css, light (left) and dark (right).
.ct-tooltip [data-tooltip]Code
<button class="ct-button ct-button--sm ct-tooltip is-visible" data-tooltip="Updated 15 s ago">Hover me</button>Tokens
From tokens/components.tokens.json. Override one instance by setting the property without the ct- prefix.
| Custom property | Value | Alias |
|---|---|---|
--ct-tooltip-background | var(--live-bg) | {colors.liveBg} |
--ct-tooltip-color | var(--live-ink) | {colors.liveInk} |
--ct-tooltip-duration | var(--motion-control-duration) | {motion.controlDuration} |
--ct-tooltip-font-size | var(--fs-cap) | {type.cap} |
--ct-tooltip-font-weight | var(--weight-semibold) | {weight.semibold} |
--ct-tooltip-max-width | 240px | |
--ct-tooltip-offset | var(--space-6) | {space.s6} |
--ct-tooltip-padding-x | var(--space-8) | {space.s8} |
--ct-tooltip-padding-y | var(--space-4) | {space.s4} |
--ct-tooltip-radius | var(--radius-chip) | {radius.chip} |
Usage
Do
- Use a tooltip for a short hint on hover or focus, such as when data was updated.
Don't
- Don't hide essential information in a tooltip; touch users may never see it.
Accessibility
- The tooltip text comes from
data-tooltip; repeat anything essential in the accessible name.