Components
Tooltip
A high-quality, styled React tooltip component built with @base-ui/react for hint popups.
The Tooltip component provides accessible hint popups on hover or focus.
Usage
import { Tooltip } from "@/components/ui/tooltip";
export function ExampleTooltip() {
return (
<Tooltip.Provider>
<Tooltip.Root>
<Tooltip.Trigger className="px-3 py-1.5 border rounded">Hover Me</Tooltip.Trigger>
<Tooltip.Portal>
<Tooltip.Positioner sideOffset={6}>
<Tooltip.Popup>
<Tooltip.Arrow />
Useful tooltip hint
</Tooltip.Popup>
</Tooltip.Positioner>
</Tooltip.Portal>
</Tooltip.Root>
</Tooltip.Provider>
);
}Preview
Anatomy
import { Tooltip } from "@base-ui/react/tooltip";
<Tooltip.Provider>
<Tooltip.Root>
<Tooltip.Trigger />
<Tooltip.Portal>
<Tooltip.Positioner>
<Tooltip.Popup>
<Tooltip.Arrow />
</Tooltip.Popup>
</Tooltip.Positioner>
</Tooltip.Portal>
</Tooltip.Root>
</Tooltip.Provider>;API Reference
Tooltip.Root Props
| Prop | Type | Default | Description |
|---|---|---|---|
open | boolean | undefined | Controlled visibility state of the tooltip popup. |
defaultOpen | boolean | false | Initial uncontrolled open state. |
delay | number | undefined | Delay in milliseconds before opening the tooltip on hover. |
variant | 'default' | 'dark' | 'dark' | Visual color theme for the tooltip popup and arrow. |
Tooltip.Positioner Props
| Prop | Type | Default | Description |
|---|---|---|---|
side | 'top' | 'bottom' | 'left' | 'right' | 'top' | Preferred side placement relative to the trigger. |
sideOffset | number | 6 | Distance in pixels between the trigger and tooltip popup. |