Popover

Basic usage

Similar to Tooltip, Popover is also built with ElPopper. So for some duplicated attributes, please refer to the documentation of Tooltip.

Virtual triggering

Like Tooltip, Popover can be triggered by virtual elements, if your use case includes separate the trigging element and the content element, you should definitely use the mechanism, normally we use #reference to place our triggering element, with triggering-element API you can set your triggering element anywhere you like, but notice that the triggering element should be an element that accepts mouse and keyboard event.

WARNING

v-popover is about to be deprecated, please use virtual-ref as alternative.

Rich content

Other components/elements can be nested in popover. Following is an example of nested table.

Nested operation

Of course, you can nest other operations. It's more light-weight than using a dialog.

Directive

You can still using popover in directive way but this is not recommended anymore since this makes your application complicated, you may refer to the virtual triggering for more information.

Attributes

AttributeDescriptionTypeAccepted ValuesDefault
triggerhow the popover is triggeredstringclick/focus/hover/manualclick
titlepopover titlestring
contentpopover content, can be replaced with a default slotstring
widthpopover widthstring / numberMin width 150px
placementpopover placementstringtop/top-start/top-end/bottom/bottom-start/bottom-end/left/left-start/left-end/right/right-start/right-endbottom
disabledwhether Popover is disabledbooleanfalse
visible / v-model:visiblewhether popover is visibleBooleanfalse
offsetpopover offsetnumber0
transitionpopover transition animationstringel-fade-in-linear
show-arrowwhether a tooltip arrow is displayed or not. For more info, please refer to ElPopperbooleantrue
popper-optionsparameters for popper.jsobjectplease refer to popper.js{ boundariesElement: 'body', gpuAcceleration: false }
popper-classcustom class name for popoverstring
show-afterdelay of appearance, in millisecondnumber0
hide-afterdelay of disappear, in millisecondnumber200
auto-closetimeout in milliseconds to hide tooltipnumber0
tabindextabindex of Popovernumber

Slots

NameDescription
text content of popover
referenceHTML element that triggers popover

Events

Event NameDescriptionParameters
showtriggers when popover shows
after-entertriggers when the entering transition ends
hidetriggers when popover hides
after-leavetriggers when the leaving transition ends