Popover

Basic usage

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

The trigger attribute is used to define how popover is triggered: hover, click, focus or contextmenu . If you want to manually control it, you can set :visible.

Virtual triggering

Like Tooltip, Popover can be triggered by virtual elements, if your use case includes separate the triggering 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.

replace the content attribute with a default slot.

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.

API

Attributes

NameDescriptionTypeDefault
triggerhow the popover is triggeredenumhover
titlepopover titlestring
effectTooltip theme, built-in theme: dark / lightenum / stringlight
contentpopover content, can be replaced with a default slotstring''
widthpopover widthstring / number150
placementpopover placementenumbottom
disabledwhether Popover is disabledbooleanfalse
visible / v-model:visiblewhether popover is visibleboolean / nullnull
offsetpopover offset, Popover is built with Tooltip, offset of Popover is undefined, but offset of Tooltip is 12numberundefined
transitionpopover transition animation, the default is el-fade-in-linearstring
show-arrowwhether a tooltip arrow is displayed or not. For more info, please refer to ElPopperbooleantrue
popper-optionsparameters for popper.jsobject{modifiers: [{name: 'computeStyles',options: {gpuAcceleration: false}}]}
popper-classcustom class name for popoverstring
popper-stylecustom style for popoverstring / object
show-afterdelay of appearance, in millisecondnumber0
hide-afterdelay of disappear, in millisecondnumber200
auto-closetimeout in milliseconds to hide tooltipnumber0
tabindextabindex of Popovernumber / string0
teleportedwhether popover dropdown is teleported to the bodybooleantrue
persistentwhen popover inactive and persistent is false , popover will be destroyedbooleantrue

Slots

NameDescription
defaulttext content of popover
referenceHTML element that triggers popover

Events

NameDescriptionType
showtriggers when popover showsFunction
before-entertriggers when the entering transition beforeFunction
after-entertriggers when the entering transition endsFunction
hidetriggers when popover hidesFunction
before-leavetriggers when the leaving transition beforeFunction
after-leavetriggers when the leaving transition endsFunction

Exposes

NameDescriptionType
hidehide popoverFunction

Source

ComponentStyleDocs

Contributors