Tooltip
Brief informative text shown on hover or focus, for any trigger element, with conditional enabling and a compact variant.
import { Tooltip } from "@plexui/ui/components/Tooltip";Examples
Overview
Simple text with tooltip
Different triggers
Inaccessible trigger
Conditionally enabled
Compact tooltips
API
| Prop | Type | Default | Description |
|---|---|---|---|
children | ReactElement | — | The trigger: a single element. Wrap plain text in Tooltip.TriggerDecorator |
content | ReactNode | — | Tooltip content (null = no tooltip) |
compact | boolean | false | Short 1-3 word tooltips, inverse styling |
interactive | boolean | false | Content is interactive, stays open when hovered |
maxWidth | number | "none" | 300 | Max width of tooltip |
openDelay | number | 150 | Delay before showing (ms) |
side | "top" | "right" | "bottom" | "left" | "top" | Preferred side |
sideOffset | number | 5 | Distance from trigger |
align | "start" | "center" | "end" | "center" | Alignment |
alignOffset | number | 0 | Alignment offset |
gutterSize | "sm" | "md" | "lg" | "md" | Content padding |
contentClassName | string | — | Class for tooltip content |
forceOpen | boolean | — | Force open or closed |
preventUnintentionalClickToClose | true | — | Keeps the tooltip open when the trigger is clicked right after it opened |
The tooltip content is the role="tooltip" element, and the trigger points at it with aria-describedby. Other props, such as onClick and onPointerDown, go to the trigger element. Tooltip.TriggerDecorator turns text into an accessible trigger with the decorator style and a tab stop (focusable, default true).
Styling
Tooltip has no component tokens of its own. It reads the shared semantic color, typography and spacing tokens listed in Design tokens, so it follows theme changes made there.