When to use
- Naming an icon-only control.
- Explaining a status mark (an error in a cell).
When not to
- Anything the person must read to act: put it on the page.
Examples
Icon and button
import { Button, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@kition/tessera-ui'
import { CircleAlertIcon } from '@kition/tessera-icons/react'
export default function Demo() {
return (
<TooltipProvider>
<div className="demo-row">
<Tooltip>
<TooltipTrigger asChild>
<Button variant="ghost" size="sm" iconOnly aria-label="Invalid value">
<CircleAlertIcon />
</Button>
</TooltipTrigger>
<TooltipContent>The value is not a date</TooltipContent>
</Tooltip>
<Tooltip>
<TooltipTrigger asChild>
<Button variant="secondary" size="sm">Hover or focus me</Button>
</TooltipTrigger>
<TooltipContent side="bottom">Tooltips name a control; they never hold the only copy of something.</TooltipContent>
</Tooltip>
</div>
</TooltipProvider>
)
}Props
Tooltip
A short label shown on hover or keyboard focus. Works on its own; a TooltipProvider above it shares one delay among several.
No props.
Also takes the attributes of its HTML element (`className`, `aria-*`, events…).
TooltipProvider
Shares one hover delay among the tooltips inside it (delayDuration, 200 ms by default), so moving between them skips the wait.
No props.
Also takes the attributes of its HTML element (`className`, `aria-*`, events…).
TooltipContent
The tooltip's bubble: dark, small, above the page.
No props.
Also takes the attributes of its HTML element (`className`, `aria-*`, events…).
Used in
1 of Kition's 16 kits use these components.
Table