Tooltip
A popup that displays information related to an element when the element receives focus or is hovered.
Installation
import {
Tooltip,
TooltipContent,
TooltipProvider,
TooltipTrigger,
} from "@sourceful-energy/ui"Usage
Examples
Icon Button with Tooltip
Different Positions
Info Tooltip
Power Output
Multiple Tooltips
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| delayDuration | number | 200 | The delay in ms before the tooltip opens. |
| side | "top" | "right" | "bottom" | "left" | "top" | The preferred side of the trigger to render against. |
| sideOffset | number | 4 | The distance in pixels from the trigger. |
Accessibility
- Built on Radix UI Tooltip for full accessibility
- Opens on hover and focus
- Escape key dismisses the tooltip
- Screen readers announce tooltip content