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.

Basic Usage

Theme

Two built-in themes: `light` and `dark`. Default is `dark`.

Theme Effect

Custom Theme

By setting `effect="customized"` and writing corresponding CSS, you can achieve terminal visual effects.

Custom Theme

Sizes and Styles

Supports custom width, max-height, and long content scrolling.

Sizes and Free Styles

Display HTML Content

The content property can be set as an HTML string, enabled by `raw-content`.

HTML Rendering

Trigger Behavior

Supports hover, click, focus, and contextmenu triggers. Default is `hover`.

Trigger Mode

Advanced Features

Follow Cursor

Follow Cursor

Interactive

Interactive

Use in Nuxt

YhTooltip can be used directly in Nuxt after registering the YH-UI module. Tooltip content and trigger markup render during SSR, while popup positioning and runtime trigger interaction continue on the client after hydration.

Use in Nuxt

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.

Nested Input Example

How to use links in Tooltip?

Use `content` slot. Ensure `interactive` is enabled.

Embed External link

API

Props

| Name | Description | Type | Default | | ------------------- | -------------------------------------------------------------------------------------------------------------------- | ---------------------- | --------------------- | ----------- | | content | Display text | `string` | `''` | | placement | Positioning | `TooltipPlacement` | `'top'` | | trigger | Trigger mode | `TooltipTrigger | TooltipTrigger[]` | `'hover'` | | 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 control | `boolean | null` | `null` | | raw-content | Whether to render `content` as an HTML string | `boolean` | `false` | | follow-cursor | Follow mouse cursor | `boolean` | `false` | | persistent | Whether the popper DOM stays mounted while hidden. When set to `false`, it renders only while visible | `boolean` | `true` | | width | Popper width | `string | number` | `'auto'` | | max-height | Max height | `string | number` | `'none'` | | scrollable | Scrollable content | `boolean` | `false` | | popper-class | Custom popper class | `string` | `''` | | popper-style | Custom popper style. At runtime, only object styles are merged; string and array forms are declared but not consumed | `StyleValue` | `{}` | | content-class | Custom content class | `string` | `''` | | content-style | Custom content style. At runtime, only object styles are merged | `StyleValue` | `{}` | | arrow-class | Declared arrow class prop. The current template does not consume it | `string` | `''` | | arrow-style | Declared arrow style prop. The current template does not consume it | `StyleValue` | `{}` | | arrow-wrapper-class | Declared arrow wrapper class prop. The current template does not consume it | `string` | `''` | | arrow-wrapper-style | Declared arrow wrapper style prop. The current template does not consume it | `StyleValue` | `{}` | | z-index | z-index | `number` | `2000` | | transition | Transition name | `string` | `'yh-tooltip-fade'` | | teleported | Teleport to body | `boolean` | `true` | | theme-overrides | Component-level theme overrides | `ComponentThemeVars` | `undefined` |

Slots

Name	Description
default	Trigger element
content	Custom content (overrides content prop)

Events

Name	Description	Parameters
show	Triggers when showing	`() => void`
hide	Triggers when hiding	`() => void`
update:visible	Visibility change	`(visible: boolean)`

Theme Variables

YhTooltip supports `themeOverrides`. The stylesheet directly consumes the following component-scoped 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)`

Other z-index, font-size, radius, and shadow values still come from shared theme tokens such as `--yh-z-index-tooltip`, `--yh-font-size-sm`, `--yh-radius-md`, and `--yh-shadow-lg`.

Dark Mode

Tooltip automatically switches to dark themes when `html.dark` is present.

Expose

Name	Description	Type
updatePosition	Manually refresh popper positioning.	() => Promise<void> | void
visible	Current visibility ref.	Ref<boolean>
triggerRef	Trigger element ref.	Ref<HTMLElement | null>
popperRef	Popper element ref.	Ref<HTMLElement | null>

Type Exports

Name	Description
YhTooltipProps	Component props type
YhTooltipEmits	Component emits type
YhTooltipSlots	Component slots type
YhTooltipExpose	Component expose type
YhTooltipPlacement	Placement union type
YhTooltipTrigger	Trigger union type
YhTooltipInstance	Component instance type