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 |