Popover Component

This Popover component provides an easy-to-integrate solution for creating interactive popovers within your Vue applications. Crafted with accessibility in mind, it offers a range of configurations, from simple popovers to ones with customizable triggers, appearances, and behaviors.

Props

| Prop | Type | Default | Description | |-----------------------------|--------------------------------------------------------------------------------------|----------------|--------------------------------------------------------------------------------------------------------| | data-id-prefix | String | | required Prefix for all the id attributes | | data-placement | @floating-ui Placement | bottom-start | Placement of the popover relative to the trigger element | | data-fallback-placements | @floating-ui Placement[] | - | Array of alternative placements for the floating popover in case the desired placement is not possible | | data-offset | number | 0 | Offset (in pixels) between the button and the floating popover | | data-wrapper-tag | String | 'div' | The wrapper HTML tag. | | data-trigger-tag | String | 'div' | The trigger HTML tag. | | data-trigger-classes | Classes | | Classes to be applied to the trigger. | | data-popover-tag | String | 'div' | The popover HTML tag. | | data-popover-classes | Classes | | Classes to be applied to the popover. | | data-show-on-hover | Boolean | false | Show the popover on hover. | | data-mouse-leave-debounce | Number | 100 | Debounce delay after mouse leaves before the popover collapses. | | data-with-arrow | Boolean | false | Whether to display an arrow pointing towards the trigger. |

Slots

| Slot | Props | Description | |-----------|-------------------------------------------------------|--------------------------------------| | trigger | expanded: boolean, placement: Placement | Content of the trigger. | | popover | expanded: boolean, placement: Placement | Content inside the popover. | | arrow | placement: Placement (optional) | Content of the arrow (if present). |

Custom CSS Properties

| Property | Default Value | Description | |----------------------------------|---------------|------------------------------------------| | --popover-cmp-fade-duration | 0.3s | Duration of the fade animation. |