2021-10-22 19:32:39 +08:00
---
2021-10-25 15:21:08 +08:00
title: Popover
2021-10-22 19:32:39 +08:00
lang: en-US
---
2021-09-17 00:18:50 +08:00
# Popover
2020-08-13 15:18:26 +08:00
2021-09-17 00:18:50 +08:00
## Basic usage
2020-08-13 15:18:26 +08:00
2022-01-04 09:15:15 +08:00
Similar to Tooltip, Popover is also built with `ElPopper` . So for some duplicated attributes, please refer to the documentation of Tooltip.
2020-08-13 15:18:26 +08:00
2022-02-21 17:10:55 +08:00
:::demo The `trigger` attribute is used to define how popover is triggered: `hover` , `click` , `focus` or `contextmenu` . If you want to manually controll it, you can set `v-model:visible` .
2020-08-13 15:18:26 +08:00
2021-09-17 00:18:50 +08:00
popover/basic-usage
2021-09-04 19:29:28 +08:00
2020-08-13 15:18:26 +08:00
:::
2022-01-04 09:15:15 +08:00
## Virtual triggering
2020-08-13 15:18:26 +08:00
2022-01-04 09:15:15 +08:00
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.
:::
:::demo
popover/virtual-triggering
:::
## Rich content
Other components/elements can be nested in popover. Following is an example of nested table.
2020-08-13 15:18:26 +08:00
:::demo replace the `content` attribute with a default `slot` .
2021-09-17 00:18:50 +08:00
popover/nested-information
2021-09-04 19:29:28 +08:00
2020-08-13 15:18:26 +08:00
:::
2021-09-17 00:18:50 +08:00
## Nested operation
2020-08-13 15:18:26 +08:00
Of course, you can nest other operations. It's more light-weight than using a dialog.
:::demo
2021-09-04 19:29:28 +08:00
2021-09-17 00:18:50 +08:00
popover/nested-operation
2021-09-04 19:29:28 +08:00
2020-08-13 15:18:26 +08:00
:::
2022-01-04 09:15:15 +08:00
## 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.
:::demo
popover/directive-usage
:::
2021-09-17 00:18:50 +08:00
## Attributes
2021-09-04 19:29:28 +08:00
2022-01-04 09:15:15 +08:00
| Attribute | Description | Type | Accepted Values | Default |
| ------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | --------------- | --------------------------------------------------------------------------------------------------------- | ------------------------------------------------------- |
2022-02-21 17:10:55 +08:00
| trigger | how the popover is triggered | string | click/focus/hover/contextmenu | click |
2022-01-04 09:15:15 +08:00
| title | popover title | string | — | — |
2022-02-21 14:56:44 +08:00
| effect | Tooltip theme, built-in theme: `dark` / `light` | string | string | dark |
2022-01-04 09:15:15 +08:00
| 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 ](https://github.com/element-plus/element-plus/tree/dev/packages/components/popper ) | boolean | — | true |
| popper-options | parameters for [popper.js ](https://popper.js.org/docs/v2/ ) | object | please refer to [popper.js ](https://popper.js.org/docs/v2/ ) | `{ boundariesElement: 'body', gpuAcceleration: false }` |
| popper-class | custom class name for popover | string | — | — |
| 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 ](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex ) of Popover | number | — | — |
2022-02-21 10:16:42 +08:00
| teleported | whether popover dropdown is teleported to the body | boolean | true / false | true |
2022-02-21 09:21:59 +08:00
| persistent | when popover inactive and `persistent` is `false` , popover will be destroyed | boolean | — | true |
2020-08-13 15:18:26 +08:00
2021-09-17 00:18:50 +08:00
## Slots
2021-09-04 19:29:28 +08:00
| Name | Description |
| --------- | ---------------------------------- |
| — | text content of popover |
2020-08-13 15:18:26 +08:00
| reference | HTML element that triggers popover |
2021-09-17 00:18:50 +08:00
## Events
2021-09-04 19:29:28 +08:00
2022-02-21 17:10:55 +08:00
| Event Name | Description | Parameters |
| ------------ | --------------------------------------------- | ---------- |
| show | triggers when popover shows | — |
| before-enter | triggers when the entering transition befores | — |
| after-enter | triggers when the entering transition ends | — |
| hide | triggers when popover hides | — |
| before-leave | triggers when the leaving transition befores | — |
| after-leave | triggers when the leaving transition ends | — |
