npm i @velkin/react
import { VuTooltip } from "@velkin/react/tooltip";| Prop | Type | Default | Description |
|---|---|---|---|
| open | boolean | false | Whether the tooltip is visible. |
| placement | VuTooltipPlacement | "top" | Preferred side before collision flip. |
| align | VuTooltipAlign | "center" | Alignment along the trigger edge. |
| trigger | VuTooltipTrigger | "hover" | `hover`, `click`, or `both`. |
| label | string | "" | Plain-text fallback when the `tooltip` slot is empty. |
| variant | VuTooltipVariant | "elevated" | Floating surface recipe (`elevated`, `outline`, `soft`). |
| tone | VuTooltipTone | "normal" | Neutral overlay weight. |
| size | VuTooltipSize | "md" | Padding and type scale. |
| radius | VuTooltipRadius | "md" | Corner preset (`sm`/`md`/`lg`; Role C′ omits `none`/`full`). |
| arrow | boolean | false | Draws a placement arrow on the bubble. |
| interactive | boolean | false | Allows pointer interaction with tooltip content. |
| noAutoTrigger | boolean | false | Disables hover/click/focus auto triggers; use methods only. |
| delay | number | — | Hover/focus dwell time (ms) before open; omit for `--vu-tooltip-delay` (1500ms). |
| closeDelay | number | — | Ms after pointer/focus leaves before close; omit for `--vu-tooltip-close-delay`. |
| offset | number | 6 | Gap between trigger and bubble in px. |
| block | boolean | false | Stretches the trigger to the container width. |
| Event | Detail | Description |
|---|---|---|
| vu-open | CustomEvent<void> | When the tooltip begins opening. |
| vu-close | CustomEvent<void> | When the tooltip begins closing. |
| vu-open-change | VuTooltipOpenChangeDetail | When `open` changes (including via methods). |
| Slot | Description |
|---|---|
| — | - Trigger content (button, icon, text). |
| tooltip | Tooltip body; when empty, the `label` prop is shown. |
| Part | Description |
|---|---|
| trigger | Wrapper around the default slot. |
| surface | Positioned popover shell (`popover="manual"`). |
| content | Bubble surface with padding and optional arrow. |
| Method | Description |
|---|---|
| show | - Sets `open` to true. |
| hide | - Sets `open` to false (immediate; ignores `closeDelay`). |
| toggle | - Toggles `open`. |
| Name | Definition |
|---|---|
| VuTooltipAlign | |
| VuTooltipOpenChangeDetail | |
| VuTooltipPlacement | |
| VuTooltipRadius | |
| VuTooltipSize | |
| VuTooltipTone | |
| VuTooltipTrigger | |
| VuTooltipVariant | |