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

Experience mouse following effect

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[]`
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`
max-height	Max height	`string	number`
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