Popover Component

Popover component is used to pop up a lightweight tooltip near an element, which can contain various custom content. It's commonly used for displaying hint information, operation menus, detailed descriptions, etc.

Basic Usage

Basic popover providing both hover and click trigger methods.

The popover component supports both hover and click trigger methods, you can choose the appropriate interaction method based on actual needs.

Show Code

Group Usage

You can apply popover to a group of elements and manage their popup behavior simultaneously.

Apply popover to a group of elements that share the same popup content, suitable for scenarios like button groups.

Button Group Popup

Menu Item Popup

Tip: When a group of elements need to share the same popup content, you can wrap them inside the same t-popover component.

Show Code

Popup Position

Supports four directions for popup: top, right, bottom, left. You can choose the appropriate popup direction based on page space.

The popover supports four directions for popup, you can choose the appropriate popup direction based on page space.

Popup Position

Application Scenarios

• top: Suitable for scenarios where the button is located in the bottom area
• right: Suitable for scenarios where the button is located in the left area
• bottom: Suitable for scenarios where the button is located in the top area
• left: Suitable for scenarios where the button is located in the right area

Set popup position through the position property

Show Code

Custom Style

You can customize the popover's width, border radius, padding, shadow and other styles.

You can customize the width, border radius, padding, shadow and other styles of the popover to meet different design requirements.

Custom Width and Border Radius

Custom Padding

Custom Shadow

No Arrow Style

Custom Gap

Style Configuration Options:

• width: Set popover width
• radius: Set popover border radius
• padding: Set popover padding
• box-shadow: Set popover shadow
• show-arrow: Control whether to show arrow
• gap: Set gap between popover and trigger element

Show Code

Custom Content

You can customize the popover content through slots, supporting any HTML structure.

The popover supports customizing content through slots, including title, content, and footer areas.

Available Slots

• default: Trigger element
• title: Custom title area
• content: Custom content area
• footer: Custom footer area

Show Code

Trigger Configuration

Supports multiple interaction configurations such as delayed hiding, close by pressing ESC key, close by clicking other areas, etc.

The popover supports multiple trigger methods, including hover, click, focus, and manual trigger.

Hover Trigger

Click Trigger

Focus Trigger

Manual Trigger

Hover Delay

Trigger Method Properties

• type: Specify trigger method, options are hover, click, focus, manual
• hover-delay: Show delay time for hover trigger, in milliseconds
• hide-delay: Hide delay time for hover trigger, in milliseconds
• visible: Manually control popover display state (only effective when type="manual")

Show Code

Modal Layer

You can add a modal layer to the popover for a more focused interactive experience.

The popover can be configured with a modal overlay to achieve dialog-like effects.

Modal Overlay Properties

• modal: Set to true to enable modal overlay background
• close-on-modal-click: Set to false to prevent closing when clicking overlay
• modal-opacity: Set overlay transparency, default is 0.5

Show Code

Event Handling

Popover provides various events for monitoring mouse enter, leave, state changes, etc.

The popover component provides various events for monitoring mouse enter, leave, display state changes, etc.

Supported Events

• hover-enter: Triggered when mouse enters trigger element
• hover-out: Triggered when mouse leaves trigger element
• model-change: Triggered when popover display state changes
• open: Triggered when popover opens
• close: Triggered when popover closes
• click-model: Triggered when clicking overlay (effective when overlay exists)

Show Code

Popover API

TPopover Attributes

Attribute	Description	Type	Accepted Values	Default
width	Popover width	string / number	—	—
disabled	Whether disabled	boolean	true / false	false
type	Trigger method	string	hover / click / none	hover
content	Display content	string	—	—
radius	Border radius size	array / number	—	4
padding	Padding size	array / number	—	[8, 12, 8, 12]
box-shadow	Shadow configuration	array	—	—
gap	Gap between popover and trigger element	number	—	10
hide-after	Hide delay time (ms)	number	—	0
position	Popup position	string	top / right / bottom / left	top
append-to	Target position for rendering	string / element	—	body
auto-position	Whether to auto adjust position	boolean	true / false	true
show-arrow	Whether to show arrow	boolean	true / false	true
custom	Custom position coordinates	object {x: number, y: number}	—	—
dialog-animation	Whether to use dialog animation	boolean	true / false	false
drawer-animation	Whether to use drawer animation	boolean	true / false	false
close-on-press-escape	Whether to support ESC key close	boolean	true / false	false
close-on-press-other	Whether to close by clicking other areas	boolean	true / false	false
is-modal	Whether to show modal layer	boolean	true / false	false
is-modal-nest	Whether to allow modal layer nesting	boolean	true / false	false

Events

Event Name	Description	Callback Parameters
click-model	Triggered when modal is clicked	—
hover-enter	Triggered when mouse enters	(el: HTMLElement)
hover-out	Triggered when mouse leaves	(el: HTMLElement)
model-change	Triggered when display state changes	—
open	Triggered when popover opens	—
close	Triggered when popover closes	—

Slots

Slot Name	Description	Scope Parameters
default	Element that triggers popover display	—
content	Popover content	—

Style Variables

Variable Name	Description
$popover-bg-color	Popover background color
$popover-text-color	Popover text color
$popover-border-radius	Popover border radius
$popover-shadow	Popover shadow
$popover-arrow-size	Popover arrow size
</rewritten_file>