Popover
The Popover is used to display hidden content in a popup.
Currently, the Popover and Tooltip components are almost identical except for their styles. Both are retained for UI design and future code maintainability.
From a UI perspective, Tooltip is used for read-only short text hints, while Popover is designed to hold richer content (titles, buttons, forms, etc.) and allows users to perform lightweight actions.
Basic Usage
The Popover provides 9 display positions.
Use the content property to set the displayed information. The placement property determines the popup position. The property value format is: [direction]-[alignment], including 'top', 'right', 'bottom', 'left', 'top-start', 'top-end', 'right-start', 'right-end', 'bottom-start', 'bottom-end', 'left-start', 'left-end'. There are four directions and three alignment options. The default placement is top.
Trigger Method
The trigger property sets the trigger method.
Controlled Mode
Pass in visible to enable controlled mode. If not passed or set to undefined, it is uncontrolled. In this case, you can use the defaultVisible property as the default value.
Disabled State
Pass in disabled to set the disabled state. In this state, mouse events will no longer open or close the popup.
Hide Arrow
Pass in arrow to control whether the arrow is displayed. The default is true.
Offset Distance
Use the offset property to set the distance between the popup and the trigger element.
API
PopoverProps
| Attribute | Type | Optional | Default | Description | Version |
|---|---|---|---|---|---|
| content | string | True | | The content of the popover. | 0.0.2 |
| visible | boolean | null | True | | Whether the popover is visible (controlled). | 0.0.2 |
| defaultVisible | boolean | null | True | | Whether the popover is visible by default (uncontrolled). | 0.0.2 |
| placement | 'top' | 'right' | 'bottom' | 'left' | 'top-start' | 'top-end' | 'right-start' | 'right-end' | 'bottom-start' | 'bottom-end' | 'left-start' | 'left-end' | True | 'top' | The position of the popover relative to the trigger element. | 0.0.2 |
| trigger | 'hover' | 'click' | True | 'hover' | The trigger method. | 0.0.2 |
| offset | number | True | 8 | Offset distance in pixels. | 0.0.2 |
| variant | 'dark' | 'light' | True | 'light' | Popover style variant. | 0.0.2 |
| arrow | boolean | True | true | Whether to show the arrow. | 0.0.2 |
| disabled | boolean | True | false | Whether the popover is disabled. | 0.0.2 |
| zIndex | number | True | | The z-index of the popover. | 0.0.2 |
| root | HTMLElement | string | True | 'body' | The element where the popover is mounted. | 0.0.2 |
| widthEqual | boolean | True | false | 0.0.2 | |
| contentStyle | CSSProperties | True | | Style of content area. | 0.0.2 |
| destroyOnHide | boolean | True | false | Whether the popover will be destroyed when hidden. | 0.0.3 |
| borderRadius | number | True | | Corner radius. | 0.1.0 |
| animationDuration | number | True | 250 | Duration of the popup show/hide animation. | 0.1.5 |
| cascade | boolean | True | false | Enable cascading mode. Multiple nested Popovers and Tooltips with cascading mode enabled can coexist; opening a new floating window will not close previously existing ones. This property is non-reactive. | 0.1.0 |
PopoverEvents
| Event | Parameter | Description | Version |
|---|---|---|---|
| update:visible | value: boolean | v-model update for the visible property. | 0.0.2 |
| close | e: MouseEvent | Callback when the popover closes. | 0.0.2 |
| open | e: MouseEvent | Callback when the popover opens. | 0.0.2 |
PopoverSlots
| Slot | Parameter | Description | Version |
|---|---|---|---|
| default | | The trigger element. | 0.0.0-beta |
| content | | The popover content. | 0.0.0-beta |