| animation4.9.0+ | true | boolean |
Apply a CSS fade transition to the popover. |
| container5.0.0+ | 'body' | HTMLElement, (() => HTMLElement), string |
Appends the vue popover to a specific element. You can pass an HTML element or function that returns a single element. By default document.body. |
| content | - | string |
Content for your component. If you want to pass non-string value please use dedicated slot <template #content>...</template> |
| delay4.9.0+ | 0 | number, { show: number; hide: number } |
The delay for displaying and hiding the popover (in milliseconds). When a numerical value is provided, the delay applies to both the hide and show actions. The object structure for specifying the delay is as follows: delay: { 'show': 500, 'hide': 100 }. |
| fallbackPlacements4.9.0+ | () => ['top', 'right', 'bottom', 'left'] | Placements, Placements[] |
Specify the desired order of fallback placements by providing a list of placements as an array. The placements should be prioritized based on preference. |
| floatingConfig5.10.0+ | undefined | Partial<ComputePositionConfig>, ((
defaultFloatingConfig: Partial<ComputePositionConfig>
) => Partial<ComputePositionConfig>) |
A Floating UI configuration object, or a function that receives the default configuration and returns a modified one, used to customize the positioning of the popover. [Read more](https://floating-ui.com/docs/computePosition#options) |
| offset | [0, 8] | array |
Offset of the popover relative to its target. |
| placement | 'top' | Placement, string |
Describes the placement of your component after the Floating UI middleware may have flipped or altered the originally provided placement property. start and end are logical: they follow the reading direction, so end is the right side in LTR and the left side in RTL. left and right are their deprecated spellings and resolve identically. Breakpoint prefixes make it responsive: top md:end reads as top below md and end from md up. The breakpoints are the Sass ones — sm, md, lg, xl, 2xl. |
| show6.0.0+ | undefined | boolean |
Control the visibility. When set, the popover renders what show says (delays still apply as presentation) and trigger gestures only emit update:show — nothing changes until the parent flips the prop. |
| title | - | string |
Title for your component. If you want to pass non-string value please use dedicated slot <template #title>...</template> |
| trigger | 'click' | Triggers, Triggers[] |
Sets which event handlers you’d like provided to your toggle prop. You can specify one trigger or an array of them. |
| visibleDeprecated 6.0.0 | undefined | boolean |
Toggle the visibility of popover component. Use show / v-model:show instead — visible is ignored when show is set. |