This component requires the <client-only></client-only> wrap when used in SSR (eg: Nuxt) and SSG (eg: VitePress).

Basic usage

Popover is built with ElTooltip. 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 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.


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.


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.


NameDescriptionTypeAccepted ValuesDefault
triggerhow the popover is triggeredstringclick/focus/hover/contextmenuhover
titlepopover titlestring
effectTooltip theme, built-in theme: dark / lightstringstringlight
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 offset, Popover is built with Tooltip, offset of Popover is undefined, but offset of Tooltip is 12number12
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{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
teleportedwhether popover dropdown is teleported to the bodybooleantrue / falsetrue
persistentwhen popover inactive and persistent is false , popover will be destroyedbooleantrue


text content of popover
referenceHTML element that triggers popover


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