Epicmax - We are the core team behind Vuestic UI and Vuestic Admin and frontend development company specializing in Vue.js since our founding in 2017.
🔥🔥🔥 Hire us

Popover
#

popovertooltip

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
#

You can use icon, title and body slots to provide your own extra content into the popover component.

Open in GitHub

API
#

Props #

NameDescriptionTypesDefault
anchor

String | Object

-

anchorSelector

Anchor CSS selector instead of passing slot

String

""

ariaLabel

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

String

"$t:toggleDropdown"

autoHide

Adds the ability to hide popover when clicked outside

Boolean

true

autoPlacement

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

Boolean

true

closeOnAnchorClick

Popover will be closed when anchor is clicked

Boolean

true

closeOnContentClick

Popover will be closed when clicked inside popover content

Boolean

true

closeOnFocusOutside

Boolean

true

color

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

String

"#1b1a1f"

contentClass

String

""

cursor

Dropdown will be rendered relative to cursor position

Boolean | Object

false

disabled

Applies disabled style and removes all user interaction effects.

Boolean

-

hoverOutTimeout

Delay before closing

Number | String

200

hoverOverTimeout

Delay before opening

Number | String

30

icon

Sets an icon.

String

""

innerAnchorSelector

Anchor CSS selector inside passed slot

String

""

isContentHoverable

If true, dropdown content will be hoverable

Boolean

true

keepAnchorWidth

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

Boolean

false

keyboardNavigation

Enables keyboard navigation for the component.

Boolean

true

message

Message which showed in a popover

String

""

modelValue

The value of the v-model bindings.

Boolean

false

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 | Array

-

readonly

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

Boolean

-

role

Sets the role attribute.

String

"button"

stateful

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

Boolean

true

stickToEdges

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

-

textColor

Text color (theme string or HEX string).

String

-

title

Sets the title of the popover

String

""

trigger

Event on which popover is triggered

String | Array

[
  "hover",
  "enter",
  "space",
  "arrow-down",
  "arrow-up"
]
verticalScrollOnOverflow

Boolean

true

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