Fabricator UI
Search documentation
Search pages, components, blocks, styles and colours.
A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.
Installation
Usage
import { Tooltip, TooltipTrigger } from "@/components/ui/tooltip"<TooltipTrigger>
<Button>Hover</Button>
<Tooltip>
<p>Add to library</p>
</Tooltip>
</TooltipTrigger>Composition
Use the following composition to build a Tooltip:
TooltipTrigger
├── Button
└── TooltipPlacement
Use the placement prop to change the position of the tooltip.
With Keyboard Shortcut
Disabled Button
Show a tooltip on a disabled button by wrapping it with a span.
API Reference
See the React Aria Tooltip documentation.