'/%3e%3cpath%20d='M0%2059.6282L80.7353%200.299805L161.471%2059.6282L80.7355%20118.345L0%2059.6282Z'%20fill='%2310B981'/%3e%3cdefs%3e%3clinearGradient%20id='paint0_linear_0_1'%20x1='80.7354'%20y1='39.9999'%20x2='80.7354'%20y2='113.5'%20gradientUnits='userSpaceOnUse'%3e%3cstop%20stop-color='%23065F46'/%3e%3cstop%20offset='1'%20stop-color='%2310B981'/%3e%3c/linearGradient%3e%3c/defs%3e%3c/svg%3e){kind=small}
#API
Popover
props
Name | Description | Type | Default | Values | Required |
|---|---|---|---|---|---|
disabled | Disables showing the popover. | Boolean | false | ||
positioningDisabled | Keeps the popover in the DOM flow without floating positioning. | Boolean | false | ||
placement | Preferred placement relative to the trigger. | String | bottom-start | toptop-starttop-endbottombottom-startbottom-endleftleft-startleft-endrightright-startright-end | |
delay | Show/hide delay in ms, or `{ show, hide }`. | String Number Object | 0 | ||
distance | Offset along the placement axis in pixels. | Number String | |||
skidding | Offset along the trigger edge in pixels. | Number String | |||
triggers | Events that toggle the popover (for example click, hover, focus). | Array | () => ["click"] | ||
hideArrow | Hides the popover arrow. | Boolean | true | ||
showTriggers | Events that show the popover, or a function deriving them from `triggers`. | Array Function | |||
hideTriggers | Events that hide the popover, or a function deriving them from `triggers`. | Array Function | |||
popperTriggers | Events on the popover content that keep it open. | Array | |||
popperShowTriggers | Events on the content that show the popover. | Array Function | |||
popperHideTriggers | Events on the content that hide the popover. | Array Function | |||
container | Element that contains the floating popover DOM. | String Object Boolean | body | ||
boundary | Overflow boundary used for flip/shift positioning. | String Object | |||
strategy | CSS position strategy for the floating element. | String | absolute | ||
autoHide | Hides on outside click, or a predicate deciding whether to hide. | Boolean Function | true | ||
shown | Controlled open state. | Boolean | false | ||
handleResize | Repositions when the popover content size changes. | Boolean | true | ||
instantMove | Skips transition when the popover moves between placements. | Boolean | false | ||
eagerMount | Mounts popover content immediately instead of on first open. | Boolean | false | ||
popperClass | Extra class(es) on the floating popover element. | String Array Object | |||
computeTransformOrigin | Computes transform-origin for scale transitions. | Boolean | false |
slots
Name | Description |
|---|---|
default | Trigger element. |
content | Popover panel content. |
emits
Name | Description |
|---|---|
show | Emitted when the popover starts opening. |
hide | Emitted when the popover starts closing. |
update:shown | Emitted when open state changes. |
apply-show | Emitted after the show transition is applied. |
apply-hide | Emitted after the hide transition is applied. |
close-group | Emitted when a popover group close is requested. |
close-directive | Emitted when closed via the close directive. |
auto-hide | Emitted when auto-hide closes the popover. |
resize | Emitted when popover content is resized. |
methods
Name | Description |
|---|---|
show | Show the popover. |
hide | Hide the popover. |
toggle | Toggle open state. |
PopoverContainer
props
Name | Description | Type | Default | Values | Required |
|---|---|---|---|---|---|
tag | Root element tag. | String | div |
slots
Name | Description |
|---|---|
default | Styled container content for popover panels. |