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.

Open in GitHub

Color
#

You can set different background colors to the component.

Open in GitHub

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

Open in GitHub

Icon
#

You can set an icon to the component.

Open in GitHub

Title
#

You can set a title to the popover.

Open in GitHub

Trigger
#

Events triggering the popover separated with spaces: hover, click or focus.

Open in GitHub

Slots usage
#

Open in GitHub

API
#

Props #

NameDescriptionTypesDefault
anchor-selector

Anchor CSS selector instead of passing slot

String

""

aria-label

the aria-label of anchor slot of dropdown of the component

String

"$t:toggleDropdown"

auto-hide

Adds the ability to hide popover when clicked outside

Boolean

true

auto-placement

If dropdown doesn't fit viewport, it will be placed automatically to fit viewport

Boolean

true

close-on-anchor-click

Popover will be closed when anchor is clicked

Boolean

true

close-on-content-click

Popover will be closed when clicked inside popover content

Boolean

true

color

Color of the component (theme string or HEX string).

String

"#1b1a1f"

cursor

Dropdown will be rendered relative to cursor position

Boolean

false

disabled

Applies disabled style and removes all user interaction effects.

Boolean

-

hover-out-timeout

Delay before closing

Number

200

hover-over-timeout

Delay before opening

Number

30

icon

Sets an icon.

String

""

inner-anchor-selector

Anchor CSS selector inside passed slot

String

""

is-content-hoverable

If true, dropdown content will be hoverable

Boolean

true

keep-anchor-width

If true, popover content will have exact same width as anchor

Boolean

false

keyboard-navigation

Enables keyboard navigation for the component.

Boolean

false

message

Message which showed in a popover

String

""

model-value

The value of the v-model bindings.

Boolean

-

offset

Dropdown content will be moved by main and cross axis according to current placement

Array | Number

4

placement

Sets a popover position. More about placements

String

"auto"

preset

Named preset combination of component props.

String

-

prevent-overflow

If true, dropdown will be teleported to target ignoring overflow: hidden on relative position elements.

Boolean

false

readonly

Doesn't look disabled, but acts like one. Mostly useful for wrapper components.

Boolean

-

stateful

Add possibility to work with component without setting v-model.

Boolean

true

stick-to-edges

Dropdown will not be rendered outside of viewport. It will be moved in opposite direction.

Boolean

false

target

Navigation target, More info here.

String | Object

-

teleport

Element where content will be rendered

String | Object

-

text-color

Text color (theme string or HEX string).

String

-

title

Sets the title of the popover

String

""

trigger

Event on which popover is triggered

any

"hover"

Slots #

NameDescription

body

Custom body slot

icon

By default replaces with a va-icon and icon name from icon property

title

Custom title slot

Css Variables #

NameDefault 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