Tooltip
Names an icon button or explains a control, on hover and focus.
import { Tooltip } from "@flinbu/seed";With shortcuts
import { Button, Tooltip } from "@flinbu/seed";
import { Copy, Redo2, Undo2 } from "lucide-react";
<div className="flex gap-xxs">
<Tooltip content="Undo" shortcut="⌘Z"><Button variant="ghost" icon={<Undo2 />} aria-label="Undo" /></Tooltip>
<Tooltip content="Redo" shortcut="⇧⌘Z"><Button variant="ghost" icon={<Redo2 />} aria-label="Redo" /></Tooltip>
<Tooltip content="Copy CSS variable" side="bottom"><Button variant="ghost" icon={<Copy />} aria-label="Copy CSS variable" /></Tooltip>
</div>Use it for
- Every icon-only button.
- A shortcut next to the action's name.
Use something else for
- Anything people must read or click: put it on the page.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
content | ReactNode | – | A few words. |
shortcut | ReactNode | – | Shown after the text. |
side | Side | 'top' | Placement. |
delay | number | 300 | ms before it opens on hover. |
children | ReactElement | – | One focusable trigger. |
Accessibility
- Built on Radix Tooltip: opens on focus and hover, Escape closes it, linked with aria-describedby.
- Icon buttons still need their own aria-label.