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 of triggers like ['hover', 'click'].

Triggers

Advanced Slot Content

Supports header, content, footer, and icon slots, enabling highly expressive complex UI.

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) with no hydration errors
• ✅ Automatically detects global dark mode
• ✅ Supports all Props and Slots
• ✅ Floating layer container automatically teleports to body to ensure correct z-index

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 (same as Popconfirm)	string	-
icon	Icon name (same as 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'	'light'
disabled	Whether to disable	boolean	false
show-arrow	Whether to show arrow	boolean	true
show-after	Show delay (ms)	number	0
hide-after	Hide delay (ms)	number	100
offset	Offset	[number, number]	[0, 12]
width	Popup width	string | number	'auto'
max-height	Max height (with scrollable)	string | number	'none'
scrollable	Whether content is scrollable	boolean	false
interactive	Whether to allow mouse entering popup	boolean	true
match-trigger-width	Whether to match trigger width	boolean	false
z-index	Z-index	number	2003
teleported	Whether to mount to body	boolean	true
popper-class	Popup custom class	string	-
popper-style	Popup custom style	CSSProperties	{}
transition	Animation name	string	'yh-popover-fade'
persistent	Whether to persist DOM on hide	boolean	true

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 (overrides content prop)
icon	Custom icon
footer	Custom footer action area

Expose

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

Theme Variables (CSS Variables)

The component supports deep customization via CSS variables. All color variables are integrated with the global theme system, automatically supporting dark mode:

Variable	Default	Description
--yh-popover-bg	var(--yh-bg-color-overlay)	Popover background color (auto-switches in dark mode)
--yh-popover-border	var(--yh-border-color-light)	Border color
--yh-popover-text	var(--yh-text-color-primary)	Primary text color
--yh-popover-text-secondary	var(--yh-text-color-secondary)	Secondary text color
--yh-popover-radius	var(--yh-radius-lg)	Popover border radius
--yh-popover-shadow	var(--yh-shadow-lg)	Popover shadow
--yh-popover-title-size	var(--yh-font-size-md)	Title font size

---

Tip: Popover is deeply integrated with the underlying Tooltip engine, with excellent performance, supporting 12-direction popup and perfectly adapted to Nuxt SSR solution.