Components / feedback
Tooltip
Brief label that explains a control on hover or keyboard focus.
import { Tooltip } from '@basiiik/ui';
The snippet an agent gets
From get_component_snippet, with the required props filled in from the spec. Every snippet is type-checked against the library before it is shipped.
import { Tooltip, IconButton } from '@basiiik/ui';
<Tooltip content="Copy a shareable link"><IconButton icon={<CopyIcon />} aria-label="Copy link" /></Tooltip>- Example values were filled in for the required prop content: replace them with your own.
- CopyIcon is a placeholder for your own icons or components; @basiiik/ui ships no icons.
- Shown on trigger hover and keyboard focus (CSS); Escape dismisses. Placement is fixed with no collision flipping.
openkeeps it visible for docs and visual tests. - Storybook: Feedback/Tooltip.
Props
| Prop | Type | Notes |
|---|---|---|
placement | "top" | "bottom" | "left" | "right" | Default "top" |
tone | "dark" | "light" | Default "dark" |
content required | ReactNode | |
children | ReactElement<{ 'aria-describedby'?: string; }, string | React.JSXElementConstructor<any>> |
Other props
| Prop | Type | What it does |
|---|---|---|
open | boolean | Keep the tooltip visible. Meant for documentation and visual tests; Escape still dismisses it. |
className | string |
States. Shown on trigger hover and keyboard focus (CSS); Escape dismisses. Placement is fixed with no collision flipping. open keeps it visible for docs and visual tests.
Use it when
- Name or briefly explain an icon-only control or truncated text
Do not use it when
- Interactive or essential content (use Popover)
Rules for agents
- The child must be focusable (a Button, IconButton, Link or input); the Tooltip links to it with aria-describedby
- Content is a few words of plain text, never links, buttons or other interactive content
- An IconButton still needs its own aria-label; the Tooltip describes, it does not name
- Do not wrap disabled controls: they cannot be focused, so keyboard users never see the tooltip
Avoid
- Putting essential information, such as an error or instructions, only in a Tooltip
- Links, buttons or forms inside a Tooltip (use Popover)
- A Tooltip that repeats the visible label of its trigger
- Wrapping a non-focusable element such as plain text or an icon
- Using a Tooltip to explain why a control is disabled
Writing the content
- A short phrase, no full stop: 'Copy link', 'Last edited 2 hours ago'
- At most one line where possible
- Use sentence case
Keyboard
- Appears on focus as well as hover
- Escape dismisses
Accessibility
- Trigger references the tooltip with aria-describedby
- Tooltip must be hoverable and persistent per WCAG 1.4.13
Colour tokens it reads
color.bg.inversecolor.bg.surfacecolor.border.defaultcolor.text.inversecolor.text.primaryRelated
feedback 8 Figma variants Try it in the live demo