# Tooltip
> One bubble per group: it waits on the first hover, then glides from button to button, resizing to its words, with the keyboard shortcut inside.
Overlays · tooltip, toolbar, hint, shortcut · HTML, CSS, vanilla JS · no dependencies · updated 2026-10-21
Demo: https://kodza.dev/components/tooltip-component/
## Files
The code below, served as files: byte for byte what the Kodza site copies (the CSS includes its theme guard).
- [`kodza-tooltip-component.css`](https://kodza.dev/registry/tooltip-component/kodza-tooltip-component.css) · 9.2 KB
- [`kodza-tooltip-component.js`](https://kodza.dev/registry/tooltip-component/kodza-tooltip-component.js) · 8.0 KB
- [`kodza-tooltip-component.html`](https://kodza.dev/registry/tooltip-component/kodza-tooltip-component.html) · 2.1 KB · the markup, to adapt and paste into your page
**Can you run shell commands? Download the CSS and the JS, don't retype them.** Retyping costs thousands of tokens and can drop or change lines of the CSS. Put the files where your stack expects them (Use it says where: change the `-o` paths):
```bash
curl -fsSL --create-dirs -o kodza/kodza-tooltip-component.css https://kodza.dev/registry/tooltip-component/kodza-tooltip-component.css
curl -fsSL --create-dirs -o kodza/kodza-tooltip-component.js https://kodza.dev/registry/tooltip-component/kodza-tooltip-component.js
```
Then load the files from your page as Use it shows, instead of pasting the content. The HTML is the part you adapt (text, links, modifiers): paste it from the Code section. Copy the CSS and the JS from the Code section only if you can't run commands, exactly as they are. (Windows PowerShell: `curl.exe`.)
## API
- Root: `.kodza-tooltip`
- Variables (set them on the root element itself: it declares its own defaults):
- `--kz-tip-bg: #0a0a0a`
- `--kz-tip-fg: #ffffff`
- `--kz-tip-muted: rgba(255, 255, 255, 0.62)`
- `--kz-tip-key: rgba(255, 255, 255, 0.14)`
- `--kz-tip-surface: #ffffff`
- `--kz-tip-ink: #0a0a0a`
- `--kz-tip-line: rgba(10, 10, 10, 0.12)`
- `--kz-tip-soft: rgba(10, 10, 10, 0.06)`
- `--kz-tip-delay: 500ms`
- `--kz-tip-ease: cubic-bezier(0.22, 1, 0.36, 1)`
- Modifiers: `.kodza-tooltip--bottom`, `.kodza-tooltip--toolbar`
- Attributes:
- `data-keys` (e.g. `⌘ B`, `⌘ I`, `⌘ ⇧ X`, `⌘ K`, `⌘ E`, `⌘ ↵`)
- `data-tip` (e.g. `Bold`, `Italic`, `Strikethrough`, `Link`, `Code`, `Ship it`)
- Lifecycle: `kodza:init` / `kodza:destroy` on `document`, with `{ detail: { root } }` to target a container.
## Keyboard
What each key does, by where the focus is. Keep it working when you adapt the HTML: same elements, same classes.
- In the toolbar (focus in `.kodza-tooltip--toolbar .kodza-tooltip__trigger`):
- `ArrowRight` / `ArrowLeft`: Next or previous button, round and round
- `Tab` / `Shift+Tab`: Leaves the toolbar in one stop
- On a trigger (focus in `.kodza-tooltip__trigger`):
- `Escape`: Hides the tip
- Anywhere:
- `Tab` / `Shift+Tab`: Shows the tip of the trigger that gets focus
## Dark mode
The values Kodza uses on a dark background (`#0a0a0a`). For a page that follows the system theme, add them after the component's CSS:
```css
@media (prefers-color-scheme: dark) {
.kodza-tooltip {
--kz-tip-bg: #f2f2f0;
--kz-tip-fg: #0a0a0a;
--kz-tip-muted: rgba(10, 10, 10, 0.6);
--kz-tip-key: rgba(10, 10, 10, 0.08);
--kz-tip-surface: #161616;
--kz-tip-ink: #f2f2f0;
--kz-tip-line: rgba(255, 255, 255, 0.14);
--kz-tip-soft: rgba(255, 255, 255, 0.08);
}
}
```
A site with its own theme switch puts the same rules under its dark selector instead (`[data-theme="dark"] .kodza-tooltip { … }`); a single dark section, under that section's class.
## Use it
### Plain HTML page
- CSS: `kodza/kodza-tooltip-component.css` next to the page (the Files commands as they are), linked in ``: ``. Without a shell, paste it in a `