Key
Every button, and every link that acts like one: a cap on a skirt that drops below the plate when pressed.
Kit part · Tooltips
Tooltip
A one-line name for an icon key, printed on a small dark plate above it on hover and on keyboard focus.
- Element
- data-tip
- Needs
- kit.css
- Rules
- key.rules.md · 6
- Finishes
- Aluminium · Graphite · Porcelain · Black
- Volumes
- Tactile · Quiet
Variants
Every state, at once
Both finishes, side by side. Hover, pressed and focus are forced with .is-hover, .is-down and .is-focus; checked and disabled are real.
Aluminium
| Part | Rest | Hover | Focus |
|---|---|---|---|
| Tip |
Graphite
| Part | Rest | Hover | Focus |
|---|---|---|---|
| Tip |
API
| Name | Kind | Values | What it does |
|---|---|---|---|
| data-tip | attribute | text | The words. Shown above, centred, on :hover and :focus-visible. |
| position: relative | side effect | — | The kit sets it on any element with data-tip, to place the tip. |
Markup
<button class="tui-key tui-key--icon" aria-label="Play" data-tip="Play">
<svg viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path d="M5 3.5v9l7-4.5z"/></svg>
</button>Needs kit.css only, no script. How to install the kit.
Accessibility
- A tooltip is not read by screen readers: the
aria-labelis what names the key. Keep the two the same. - It shows on keyboard focus, not only hover. On touch there is no hover: the label must not be needed to use the key.
How it’s built
One ::after with content: attr(data-tip), in the contrast colours. No script and no positioning engine, so keep tips to a word or two and away from the viewport’s edges.
Rules
key.rules.mdIn the brain
Icon keys need an aria-label and a data-tip.
6 rules in this file, with the foundations they rest on and the anti-patterns that break them. Full rules ship in the brain with the Pass.