Components
Tooltip
Contextual label shown on hover or focus, built on Base UI Tooltip.
Category: Overlay — Pattern: Base UI Overlay
Dependency: @base-ui-components/react/tooltip
Import
import {
Tooltip,
TooltipProvider,
TooltipTrigger,
TooltipContent,
} from "@hareru/ui"Exports
| Name | Type | Description |
|---|---|---|
TooltipProvider | Component | App-level provider; place once near the root |
Tooltip | Component | Root tooltip context; wraps trigger and content |
TooltipTrigger | Component | Element that activates the tooltip; supports asChild |
TooltipContent | Component | Floating label content |
Key Props
| Prop | Type | Default | Description |
|---|---|---|---|
sideOffset | number | 4 | Gap in pixels between trigger and tooltip |
Structure
- TooltipTrigger
[trigger](expected) - TooltipContent
[content](expected)
(expected) = recommended in canonical composition, not runtime-required.
Accessibility
- Roles:
tooltip - Keyboard:
- Escape to dismiss
- Notes: ARIA tooltip pattern provided by Base UI. Shows on hover and focus.
Usage
import {
Tooltip,
TooltipProvider,
TooltipTrigger,
TooltipContent,
Button,
} from "@hareru/ui"
<TooltipProvider>
<Tooltip>
<TooltipTrigger asChild><Button variant="outline">Hover me</Button></TooltipTrigger>
<TooltipContent><p>Tooltip content</p></TooltipContent>
</Tooltip>
</TooltipProvider>Notes
TooltipProvidershould be placed once at the application root (e.g. inside your layout), not per tooltip.- Tooltips appear on hover and keyboard focus, making them accessible without mouse interaction.
- Do not place interactive elements (buttons, links) inside
TooltipContent.