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 |
---|---|---|---|
anchor-selector | Anchor CSS selector instead of passing slot |
|
|
aria-label | the aria-label of anchor slot of dropdown of the component |
|
|
auto-hide | Adds the ability to hide popover when clicked outside |
|
|
auto-placement | If dropdown doesn't fit viewport, it will be placed automatically to fit viewport |
|
|
close-on-anchor-click | Popover will be closed when anchor is clicked |
|
|
close-on-content-click | Popover will be closed when clicked inside popover content |
|
|
color | Color of the component (theme string or |
|
|
cursor | Dropdown will be rendered relative to cursor position |
|
|
disabled | Applies |
| - |
hover-out-timeout | Delay before closing |
|
|
hover-over-timeout | Delay before opening |
|
|
icon | Sets an icon. |
|
|
inner-anchor-selector | Anchor CSS selector inside passed slot |
|
|
is-content-hoverable | If true, dropdown content will be hoverable |
|
|
keep-anchor-width | If true, popover content will have exact same width as anchor |
|
|
keyboard-navigation | Enables keyboard navigation for the component. |
|
|
message | Message which showed in a popover |
|
|
model-value | The value of the |
| - |
offset | Dropdown content will be moved by main and cross axis according to current |
|
|
placement | Sets a popover position. More about placements |
|
|
preset | Named preset combination of component props. |
| - |
prevent-overflow | If true, dropdown will be teleported to target ignoring |
|
|
readonly | Doesn't look disabled, but acts like one. Mostly useful for wrapper components. |
| - |
stateful | Add possibility to work with component without setting |
|
|
stick-to-edges | Dropdown will not be rendered outside of viewport. It will be moved in opposite direction. |
|
|
target | Navigation target, More info here. |
| - |
teleport | Element where content will be rendered |
| - |
text-color | Text color (theme string or HEX string). |
| - |
title | Sets the title of the popover |
|
|
trigger | Event on which popover is triggered |
|
|
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 |