Tooltip
A lightweight, high-performance tooltip component based on the industry-leading Floating UI positioning engine.
Basic Usage
Provides 12 placement directions through the `placement` prop.
Theme
Two built-in themes: `light` and `dark`. Default is `dark`.
Custom Theme
By setting `effect="customized"` and writing corresponding CSS, you can achieve terminal visual effects.
Sizes and Styles
Supports custom width, max-height, and long content scrolling.
Display HTML Content
The content property can be set as an HTML string, enabled by `raw-content`.
Trigger Behavior
Supports hover, click, focus, and contextmenu triggers. Default is `hover`.
Advanced Features
Follow Cursor
Interactive
Use in Nuxt
YH-UI is perfectly compatible with Nuxt 3. You can use components directly without manual import.
FAQ
How to allow space input in a nested Input?
When Tooltip contains an input box, in YH-UI, we ensure interaction logic doesn't interfere with normal input. You can nest it directly.
How to use links in Tooltip?
Use `content` slot. Ensure `interactive` is enabled.
API
Props
| Name | Description | Type | Default |
|---|---|---|---|
| content | Display text | `string` | - |
| placement | Positioning | `TooltipPlacement` | `'top'` |
| trigger | Trigger mode | `TooltipTrigger | TooltipTrigger[]` |
| disabled | Whether disabled | `boolean` | `false` |
| effect | Theme style | `string` | `'dark'` |
| offset | Offset [h, v] | `[number, number]` | `[0, 8]` |
| show-after | Show delay (ms) | `number` | `0` |
| hide-after | Hide delay (ms) | `number` | `200` |
| show-arrow | Whether to show arrow | `boolean` | `true` |
| interactive | Allow mouse enter popper | `boolean` | `true` |
| visible | Manual visibility | `boolean | null` |
| raw-content | Render HTML string | `boolean` | `false` |
| follow-cursor | Follow mouse cursor | `boolean` | `false` |
| persistent | Persistent DOM | `boolean` | `true` |
| width | Popper width | `string | number` |
| max-height | Max height | `string | number` |
| scrollable | Scrollable content | `boolean` | `false` |
| popper-class | Custom popper class | `string` | - |
| popper-style | Custom popper style | `object` | - |
| content-class | Custom content class | `string` | - |
| content-style | Custom content style | `object` | - |
| z-index | z-index | `number` | `2000` |
| transition | Transition name | `string` | `'yh-tooltip-fade'` |
| teleported | Teleport to body | `boolean` | `true` |
Slots
| Name | Description |
|---|---|
| default | Trigger element |
| content | Custom content (overrides content prop) |
Events
| Name | Description | Parameters |
|---|---|---|
| show | Triggers when showing | - |
| hide | Triggers when hiding | - |
| update:visible | Visibility change | `(visible: boolean)` |
CSS Variables
| Name | Description | Default |
|---|---|---|
| `--yh-tooltip-bg` | Background color | `var(--yh-bg-color-overlay)` |
| `--yh-tooltip-border` | Border color | `var(--yh-border-color-light)` |
| `--yh-tooltip-text` | Text color | `var(--yh-text-color-primary)` |
| `--yh-z-index-tooltip` | z-index | `2004` |
Dark Mode
Tooltip automatically switches to dark themes when `html.dark` is present.