Tooltip
Brief informative text shown on hover or focus, for any trigger element, with conditional enabling and a compact variant.
import { Tooltip, TooltipTriggerDecorator } from "@plexui/vue/components/Tooltip";Examples
Overview
Different triggers
Conditionally enabled
Compact tooltips
API
| Prop | Type | Default | Description |
|---|---|---|---|
default slot | VNode | — | The trigger: a single element. Wrap plain text in TooltipTriggerDecorator |
content | string | number | VNode | null | — | Tooltip content, or the #content slot (null = no tooltip) |
compact | boolean | false | Short 1-3 word tooltips, inverse styling |
interactive | boolean | false | Content is interactive, stays open when hovered |
max-width | number | "none" | 300 | Max width of tooltip |
open-delay | number | 150 | Delay before showing (ms) |
side | "top" | "right" | "bottom" | "left" | "top" | Preferred side |
side-offset | number | 5 | Distance from trigger |
align | "start" | "center" | "end" | "center" | Alignment |
align-offset | number | 0 | Alignment offset |
gutter-size | "sm" | "md" | "lg" | "md" | Content padding |
content-class-name | string | — | Class for tooltip content |
force-open | boolean | — | Force open or closed |
prevent-unintentional-click-to-close | boolean | false | Keeps the tooltip open when the trigger is clicked right after it opened |
content slot | VNode[] | — | Rich tooltip content; takes precedence over content |
The tooltip content is the role="tooltip" element, and the trigger points at it with aria-describedby. Other attributes and listeners, such as @click and @pointerdown, go to the trigger element. TooltipTriggerDecorator 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.