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
Run the following command:
Add the TooltipProvider to the root of your app.
import { TooltipProvider } from "@/components/ui/tooltip"
export default function RootLayout({ children }) {
return (
<html lang="en">
<body>
<TooltipProvider>{children}</TooltipProvider>
</body>
</html>
)
}Usage
import {
Tooltip,
TooltipContent,
TooltipTrigger,
} from "@/components/ui/tooltip"<Tooltip>
<TooltipTrigger>Hover</TooltipTrigger>
<TooltipContent>
<p>Add to library</p>
</TooltipContent>
</Tooltip>Composition
Use the following composition to build a Tooltip:
Tooltip
├── TooltipTrigger
└── TooltipContentSide
Use the side 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 Base UI Tooltip documentation.