Basic usage

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

Nested information

Other components 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.


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 Vue-popperbooleantrue
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 millisecondnumber0
auto-closetimeout in milliseconds to hide tooltipnumber0
tabindextabindex of Popovernumber


text content of popover
referenceHTML element that triggers popover


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