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
anchorSelector

String

""

ariaLabel

String

"$t:toggleDropdown"

autoHide

Boolean

true

autoPlacement

Boolean

true

closeOnAnchorClick

Boolean

true

closeOnContentClick

Boolean

true

color

String

"#1b1a1f"

cursor

Boolean

false

disabled

Boolean

-

hoverOutTimeout

Number

200

hoverOverTimeout

Number

30

icon

String

""

innerAnchorSelector

String

""

isContentHoverable

Boolean

true

keepAnchorWidth

Boolean

false

keyboardNavigation

Boolean

false

message

String

""

modelValue

Boolean

-

offset

Array | Number

4

placement

String

"auto"

preset

String

-

preventOverflow

Boolean

false

readonly

Boolean

-

stateful

Boolean

true

stickToEdges

Boolean

false

target

String | Object

-

teleport

String | Object

-

textColor

String

-

title

String

""

trigger

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