Tooltip
A short hint on hover or keyboard focus.
Preview
tsx
import { Button, Tooltip } from '@kerf-js/veneer'export function Basic() { return ( <Tooltip content="Runs on every region"> <Button emphasis="outline" tone="neutral" > Deploy everywhere </Button> </Tooltip> )}Installation
npm install @kerf-js/veneerTry it
Change the controls: the preview and its code update together. The address keeps what you set, so you can link to it.
Live preview
Controls
Side
Codeupdates as you change the controls
import { Tooltip } from '@kerf-js/veneer'<Tooltip content="Runs on every region" kbd="⌘D"> <Button emphasis="outline" tone="neutral">Hover or focus me</Button></Tooltip>Usage
tsx
import { Tooltip } from '@kerf-js/veneer'<Tooltip content="Runs on every region"> <Button emphasis="outline" tone="neutral" > Deploy everywhere </Button></Tooltip>Placement
Use side to pick where it opens. With no room there, it flips.
tsx
import { Button, Tooltip } from '@kerf-js/veneer'export function Sides() { return ( <> <Tooltip content="Above" side="top" > <Button emphasis="outline" tone="neutral" > Top </Button> </Tooltip> <Tooltip content="Below" side="bottom" > <Button emphasis="outline" tone="neutral" > Bottom </Button> </Tooltip> <Tooltip content="Before" side="left" > <Button emphasis="outline" tone="neutral" > Left </Button> </Tooltip> <Tooltip content="After" side="right" > <Button emphasis="outline" tone="neutral" > Right </Button> </Tooltip> </> )}Alignment
Use align to line it up with its trigger.
tsx
import { Button, Tooltip } from '@kerf-js/veneer'export function Aligns() { return ( <> <Tooltip content="Lines up with the start" align="start" > <Button emphasis="outline" tone="neutral" > Start </Button> </Tooltip> <Tooltip content="Centred on the button" align="center" > <Button emphasis="outline" tone="neutral" > Center </Button> </Tooltip> <Tooltip content="Lines up with the end" align="end" > <Button emphasis="outline" tone="neutral" > End </Button> </Tooltip> </> )}With a shortcut
kbd draws a key beside the words.
tsx
import { Button, Tooltip } from '@kerf-js/veneer'export function Shortcut() { return ( <Tooltip content="Search commands" kbd="⌘K" > <Button emphasis="outline" tone="neutral" icon="search" label="Search" /> </Tooltip> )}Saying why it is disabled
Use aria-disabled: a truly disabled button can't be focused or hovered.
tsx
import { Button, Tooltip } from '@kerf-js/veneer'export function WhyDisabled() { return ( <Tooltip content="Only owners can delete a project"> <Button tone="critical" aria-disabled="true" > Delete project </Button> </Tooltip> )}An icon toolbar
Use content for the tip and kbd to show the shortcut beside it.
tsx
import { Button, Row, Tooltip } from '@kerf-js/veneer'export function IconBar() { return ( <Row gap="tight"> <Tooltip content="Redeploy" kbd="R" > <Button emphasis="ghost" tone="neutral" icon="rocket" label="Redeploy" /> </Tooltip> <Tooltip content="Open logs" kbd="L" > <Button emphasis="ghost" tone="neutral" icon="external" label="Open logs" /> </Tooltip> <Tooltip content="Copy commit" kbd="C" > <Button emphasis="ghost" tone="neutral" icon="copy" label="Copy commit" /> </Tooltip> <Tooltip content="Delete"> <Button emphasis="ghost" tone="critical" icon="trash" label="Delete" /> </Tooltip> </Row> )}Why a row failed
Use side to choose which edge the tip opens on, here left.
tsx
import { Badge, Button, Row, Text, Tooltip} from '@kerf-js/veneer'export function StatusRow() { return ( <Row justify="between" gap="group" > <Text>mobile-bff</Text> <Row gap="tight"> <Badge tone="critical" dot > Failed </Badge> <Tooltip content="Retry timed out upstream calls" side="left" > <Button size="sm" emphasis="ghost" tone="neutral" icon="info" label="Why it failed" /> </Tooltip> </Row> </Row> )}When to use
Use it for
- Naming an icon button
- Showing the shortcut for an action
Reach for something else
- Popover, when it holds anything to press, or more than a few words
Accessibility
- Tab
- Focusing the trigger shows it
- Esc
- Hides it
- Never put anything essential in a tooltip: touch has no hover.
- The tip describes its trigger, unless the trigger's name already says the same words.
- The trigger must be one focusable element.
Theming
Restyle it app-wide from veneer() in your kerf config. Every key takes colour, spacing, size, radius, shadow, type and motion; its own keys are listed. A state nests inside: hover: { bg: 'ink' }. Text on a fill you set is contrast-checked at build. How theming works
| Key | Own keys | States |
|---|---|---|
parts.popover | — | none |
ts
veneer({ colors: { brand: '#e8590c', ink: '#1b1b1f' }, parts: { popover: { radius: 12, shadow: 'lg' }, },})API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
content | string | — | The words. Plain text only. |
kbd | string | — | A key hint beside the words. |
side | Side | — | Which side it opens on. |
align | Align | — | How it lines up with its trigger. |
inline | boolean | false | Shows the tip under its trigger, in the page's flow, without waiting for hover. For docs and previews. |
children | unknown | — | The trigger: one focusable element. |
Parts
Every element carries a stable name, so you can style it from your own CSS: [data-scope="tooltip"] [data-part="content"]
content