Popover
TIP
This component requires the
<client-only></client-only>
wrap when used in SSR (eg:
Nuxt
) and SSG (eg:
VitePress
).
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 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.
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
| Name | Description | Type | Accepted Values | Default |
|---|---|---|---|---|
| trigger | how the popover is triggered | string | click/focus/hover/contextmenu | hover |
| title | popover title | string | — | — |
| effect |
Tooltip theme, built-in theme:
dark
/
light
|
string | string | light |
| content |
popover content, can be replaced with a default
slot
|
string | — | — |
| width | popover width | string / number | — | Min width 150px |
| placement | popover placement | string | top/top-start/top-end/bottom/bottom-start/bottom-end/left/left-start/left-end/right/right-start/right-end | bottom |
| disabled | whether Popover is disabled | boolean | — | false |
| visible / v-model:visible | whether popover is visible | Boolean | — | false |
| offset | popover offset | number | — | 0 |
| transition | popover transition animation | string | — | el-fade-in-linear |
| show-arrow | whether a tooltip arrow is displayed or not. For more info, please refer to ElPopper | boolean | — | true |
| popper-options | parameters for popper.js | object | please refer to popper.js |
{modifiers: [{name: 'computeStyles',options: {gpuAcceleration: false}}]}
|
| popper-class | custom class name for popover | string | — | — |
| popper-style | custom style for popover | string / object | — | — |
| show-after | delay of appearance, in millisecond | number | — | 0 |
| hide-after | delay of disappear, in millisecond | number | — | 200 |
| auto-close | timeout in milliseconds to hide tooltip | number | — | 0 |
| tabindex | tabindex of Popover | number | — | — |
| teleported | whether popover dropdown is teleported to the body | boolean | true / false | true |
| persistent |
when popover inactive and
persistent
is
false
, popover will be destroyed
|
boolean | — | true |
Slots
| Name | Description |
|---|---|
| — | text content of popover |
| reference | HTML element that triggers popover |
Events
| Name | Description | Parameters |
|---|---|---|
| show | triggers when popover shows | — |
| before-enter | triggers when the entering transition before | — |
| after-enter | triggers when the entering transition ends | — |
| hide | triggers when popover hides | — |
| before-leave | triggers when the leaving transition before | — |
| after-leave | triggers when the leaving transition ends | — |
三咲智子
JeremyWuuuuu
云游君
啝裳
Xc
zz
btea
msidolphin
qiang
Alan Wang
C.Y.Kun
kooriookami
井柏然
Delyan Haralanov
bqy
BigPengZai
Aex
zouhang
on the field of hope
Hades-li
Benleie
0xOK
LooSheng
Ignace
Qiang
amaury-hanser
Ghislain B