The Tooltip component shows helpful information when users hover over or focus on an element.
Installation
import {
TooltipProvider,
Tooltip,
TooltipTrigger,
TooltipPortal,
TooltipPositioner,
TooltipPopup,
} from "@craftdotui/baseui/components/tooltip";
<TooltipProvider>
<Tooltip>
<TooltipTrigger>Hover me</TooltipTrigger>
<TooltipPortal>
<TooltipPositioner>
<TooltipPopup>
Tooltip content
</TooltipPopup>
</TooltipPositioner>
</TooltipPortal>
</Tooltip>
</TooltipProvider>
Components
TooltipProvider
Delay before showing tooltip (ms).
Delay before hiding tooltip (ms).
Tooltip (Root)
Callback when state changes.
TooltipPositioner
Preferred side. Options: top, right, bottom, left
Alignment. Options: start, center, end
Examples
Basic Tooltip
<TooltipProvider>
<Tooltip>
<TooltipTrigger>
<Button>Hover me</Button>
</TooltipTrigger>
<TooltipPortal>
<TooltipPositioner>
<TooltipPopup>
This is a helpful tooltip
</TooltipPopup>
</TooltipPositioner>
</TooltipPortal>
</Tooltip>
</TooltipProvider>
Different Positions
<TooltipPositioner side="top">Top tooltip</TooltipPositioner>
<TooltipPositioner side="right">Right tooltip</TooltipPositioner>
<TooltipPositioner side="bottom">Bottom tooltip</TooltipPositioner>
<TooltipPositioner side="left">Left tooltip</TooltipPositioner>
Without Arrow
<TooltipPopup hideTooltipArrow>
Tooltip without arrow
</TooltipPopup>
Custom Delay
<TooltipProvider delay={1000} closeDelay={500}>
{/* Tooltips with custom timing */}
</TooltipProvider>
Accessibility
- Built on @base-ui/react for accessibility
- Appears on hover and focus
- Keyboard accessible
- Proper ARIA attributes
- Does not trap focus
- Collision detection for viewport edges