@frankhoodbs/popover-cmp NPM

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.

Version License

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).