Popover #
A va-popover can be used to display some text on top of the component.
Examples #
Basic usage #
Wrap your component in a va-popover tag and provide a message property with text.
Color #
You can set different background colors to the component.
Placement #
A component can be set in a different position. Use a position property to set it: top, left, right and bottom are available. More about placements
Icon #
You can set an icon to the component.
Title #
You can set a title to the popover.
Trigger #
Events triggering the popover separated with spaces: hover, click or focus.
Slots usage #
API #
Props #
| Name | Description | Types | Default |
|---|---|---|---|
| anchorSelector |
|
| |
| ariaLabel |
|
| |
| autoHide |
|
| |
| autoPlacement |
|
| |
| closeOnAnchorClick |
|
| |
| closeOnContentClick |
|
| |
| color |
|
| |
| cursor |
|
| |
| disabled |
| - | |
| hoverOutTimeout |
|
| |
| hoverOverTimeout |
|
| |
| icon |
|
| |
| innerAnchorSelector |
|
| |
| isContentHoverable |
|
| |
| keepAnchorWidth |
|
| |
| keyboardNavigation |
|
| |
| message |
|
| |
| modelValue |
| - | |
| offset |
|
| |
| placement |
|
| |
| preset |
| - | |
| preventOverflow |
|
| |
| readonly |
| - | |
| stateful |
|
| |
| stickToEdges |
|
| |
| target |
| - | |
| teleport |
| - | |
| textColor |
| - | |
| title |
|
| |
| trigger |
|
|
Slots #
| Name | Description |
|---|---|
body | Custom body slot |
icon | By default replaces with a |
title | Custom title slot |
Css Variables #
| Name | Default Value |
|---|---|
| --va-popover-display | inline-block |
| --va-popover-content-opacity | 1 |
| --va-popover-content-display | flex |
| --va-popover-content-align-items | center |
| --va-popover-content-padding | 0.65rem 1rem |
| --va-popover-content-border-radius | 0.5rem |
| --va-popover-content-font-size | 1rem |
| --va-popover-content-box-shadow | 0 2px 3px 0 |
| --va-popover-content-background-color | var(--va-background-primary) |
| --va-popover-title-font-weight | 700 |
| --va-popover-title-margin-bottom | 0.125rem |
| --va-popover-body-line-height | 1.5 |