2.0.2 • Published 10 months ago
@frankhoodbs/popover-cmp v2.0.2
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. |
2.0.2
10 months ago
2.0.1
10 months ago
1.2.14
10 months ago
1.2.12
10 months ago
1.2.13
10 months ago
1.2.11
10 months ago
1.2.9
1 year ago
1.2.10
1 year ago
1.2.8
1 year ago
1.2.7
1 year ago
1.2.4
1 year ago
1.2.3
1 year ago
1.2.2
1 year ago
1.2.1
1 year ago
1.2.0
1 year ago
1.1.19
1 year ago
1.1.18
1 year ago
1.1.17
1 year ago
1.1.16
1 year ago
1.1.14
1 year ago
1.1.13
1 year ago
1.1.12
1 year ago
1.1.11
1 year ago
1.1.10
1 year ago
1.1.9
1 year ago
1.1.8
1 year ago
1.1.7
1 year ago
1.1.6
1 year ago
1.1.1
2 years ago
1.1.3
2 years ago
1.1.2
2 years ago
1.0.11
2 years ago
1.0.10
2 years ago
1.0.6
2 years ago
1.0.5
2 years ago
1.0.3
2 years ago
1.0.2
2 years ago