Popover

Displays richer content than Tooltip, commonly used for showing detailed information, form submissions, or user guidance.

Basic Usage

Quickly configure a standard card via title and content.

Basic Usage

Placement

Supports 12 directions of popup positioning.

Placement

Feature Alignment (Popconfirm)

Popover supports configuring structured content like Popconfirm, including icons, titles, and descriptions.

Feature Alignment Example

Triggers

Supports multiple trigger methods: hover, click, focus, contextmenu. Also supports combinations such as ['hover', 'click'].

Triggers

Advanced Slot Content

Supports header, content, footer, and icon slots for richer card composition.

Advanced Slot Content

Controlled Visibility

Use v-model:visible to manually control component state synchronization.

Manual Control

Use in Nuxt

Popover fully supports Nuxt 3/4 SSR rendering. When using in Nuxt projects, components are automatically imported without manual registration.

Use in Nuxt

SSR Notes:

• Fully supports Server-Side Rendering (SSR) without hydration-specific runtime requirements in the component itself
• The popup layer is teleported to body by default and can be disabled with teleported
• Visual appearance follows the shared overlay theme tokens used by Tooltip and other floating layers

SSR Transparency

The Popover component uses Backdrop-filter acrylic effect, which automatically degrades to solid color in SSR environment until client-side activation, ensuring optimal loading performance.

API

Props

Prop	Description	Type	Default
title	Title	string	-
description	Description text aligned with Popconfirm	string	-
icon	Icon name aligned with Popconfirm	string	-
icon-color	Icon color	string	-
content	Content text	string	-
placement	Popup position	Placement	'bottom'
visible	Manual control visibility	boolean | null	null
trigger	Trigger method	PopoverTrigger | PopoverTrigger[]	'click'
effect	Theme style	'light' | 'dark' | string	'light'
disabled	Whether to disable	boolean	false
show-arrow	Whether to show arrow	boolean	true
show-after	Show delay in milliseconds	number	0
hide-after	Hide delay in milliseconds	number	100
offset	Popup offset	[number, number]	[0, 12]
width	Popup width	string | number	'auto'
max-height	Maximum popup height	string | number	'none'
scrollable	Whether content becomes scrollable when max-height is set	boolean	false
interactive	Whether the mouse can enter the popup without immediately hiding it	boolean	true
match-trigger-width	Whether the popup width should follow the trigger width	boolean	false
z-index	Popup z-index	number	2003
teleported	Whether to mount the popup to body	boolean	true
popper-class	Custom popup class	string	-
popper-style	Custom popup style	StyleValue	{}
transition	Transition name	string	'yh-popover-fade'
persistent	Whether the popup DOM stays mounted while hidden	boolean	true
theme-overrides	Component-level theme overrides	ComponentThemeVars	undefined

Events

Event Name	Description	Parameters
update:visible	Triggered when visibility changes	(visible: boolean)
show	Triggered when shown	-
hide	Triggered when hidden	-

Slots

Slot Name	Description
default	Trigger element
header	Custom header/title content
content	Custom body content
icon	Custom icon area
footer	Custom footer action area

Expose

Name	Description	Type
toggle	Manually toggle visibility	(val: boolean) => boolean
visible	Current visibility state	Ref<boolean>

Theme Variables

Popover accepts themeOverrides, but source does not define a dedicated component-only CSS variable table. Its visual styles are mainly composed from shared overlay tokens such as --yh-bg-color-overlay, --yh-radius-lg, --yh-shadow-lg, and the shared text color tokens inherited through the underlying floating layer.

---

Tip: Popover is deeply integrated with the underlying Tooltip engine, with excellent performance, supporting 12-direction popup and fitting naturally into Nuxt SSR projects.

Type Exports

Name	Description
YhPopoverProps	Component props type
YhPopoverEmits	Component emits type
YhPopoverSlots	Component slots type
YhPopoverExpose	Component expose type
YhPopoverTrigger	Trigger union type
YhPopoverInstance	Component instance type