---
name: element-plus-popover
description: Element Plus Popover component (el-popover) API documentation. Triggers when user wants to use, implement, or asks about el-popover or Popover component.
---

# Popover 组件 API

## Attributes

| Name                               | Description                                                                                                                                                                           | Type                                                                                                                                                                        | Default                                                                    |
| ---------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------- |
| trigger                            | how the popover is triggered, not valid in controlled mode                                                                                                                            | ^[enum]`'click' \| 'focus' \| 'hover' \| 'contextmenu'` / ^[array]`Array<'click' \| 'focus' \| 'hover' \| 'contextmenu'>`                                                   | hover                                                                      |
| trigger-keys ^(2.9.8)              | When you click the mouse to focus on the trigger element, you can define a set of keyboard codes to control the display of popover through the keyboard, not valid in controlled mode | ^[Array]                                                                                                                                                                    | ['Enter','Space']                                                          |
| title                              | popover title                                                                                                                                                                         | ^[string]                                                                                                                                                                   | —                                                                          |
| effect                             | Tooltip theme, built-in theme: `dark` / `light`                                                                                                                                       | ^[enum]`'dark' \| 'light'` / ^[string]                                                                                                                                      | light                                                                      |
| content                            | popover content, can be replaced with a default `slot`                                                                                                                                | ^[string]                                                                                                                                                                   | ''                                                                         |
| width                              | popover width                                                                                                                                                                         | ^[string] / ^[number]                                                                                                                                                       | 150                                                                        |
| placement                          | popover placement                                                                                                                                                                     | ^[enum]`'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] / ^[null]                                                                                                                                                        | null                                                                       |
| offset                             | popover offset, `Popover` is built with `Tooltip`, offset of `Popover` is `undefined`, but offset of `Tooltip` is 12                                                                  | ^[number]                                                                                                                                                                   | undefined                                                                  |
| transition                         | popover transition animation, the default is el-fade-in-linear                                                                                                                        | ^[string]                                                                                                                                                                   | —                                                                          |
| 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]                                                                                                                                                                   | `{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, not valid in controlled mode                                                                                                                     | ^[number]                                                                                                                                                                   | 0                                                                          |
| hide-after                         | delay of disappear, in millisecond, not valid in controlled mode                                                                                                                      | ^[number]                                                                                                                                                                   | 200                                                                        |
| auto-close                         | timeout in milliseconds to hide tooltip, not valid in controlled mode                                                                                                                 | ^[number]                                                                                                                                                                   | 0                                                                          |
| tabindex                           | [tabindex](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) of Popover                                                                                   | ^[number] / ^[string]                                                                                                                                                       | 0                                                                          |
| teleported                         | whether popover dropdown is teleported to the body                                                                                                                                    | ^[boolean]                                                                                                                                                                  | true                                                                       |
| append-to ^(2.9.10)                | which element the popover CONTENT appends to                                                                                                                                          | ^[CSSSelector] / ^[HTMLElement]                                                                                                                                             | body                                                                       |
| persistent                         | when popover inactive and `persistent` is `false` , popover will be destroyed                                                                                                         | ^[boolean]                                                                                                                                                                  | true                                                                       |
| virtual-triggering                 | Indicates whether virtual triggering is enabled                                                                                                                                       | ^[boolean]                                                                                                                                                                  | —                                                                          |
| virtual-ref                        | Indicates the reference element to which the popover is attached                                                                                                                      | ^[HTMLElement]                                                                                                                                                              | —                                                                          |
| [tooltip](./tooltip.md#attributes) | Inherits all attributes from Tooltip                                                                                                                                                  | —                                                                                                                                                                           | —                                                                          |

## Slots

| Name      | Description                                                                     | Type                          |
| --------- | ------------------------------------------------------------------------------- | ----------------------------- |
| default   | content of popover, version ^(2.13.4) and later can receive the hide parameter. | ^[object]`{hide: () => void}` |
| reference | HTML element that triggers popover, only a single root element is accepted      | -                             |

## Events

| Name         | Description                                  | Type                    |
| ------------ | -------------------------------------------- | ----------------------- |
| show         | triggers when popover shows                  | ^[Function]`() => void` |
| before-enter | triggers when the entering transition before | ^[Function]`() => void` |
| after-enter  | triggers when the entering transition ends   | ^[Function]`() => void` |
| hide         | triggers when popover hides                  | ^[Function]`() => void` |
| before-leave | triggers when the leaving transition before  | ^[Function]`() => void` |
| after-leave  | triggers when the leaving transition ends    | ^[Function]`() => void` |

## Exposes

| Name | Description  | Type                    |
| ---- | ------------ | ----------------------- |
| hide | hide popover | ^[Function]`() => void` |

## 参考

- 官方文档: https://element-plus.org/en-US/component/popover.html