Popover 气泡卡片
基础用法
与Tooltip相似，Popover也是基于ElPopper的构建。 因此对于重复属性，请参考 Tooltip 的文档，在此文档中不做详尽解释。
虚拟触发
像 Tooltip一样，Popover 可以由虚拟元素触发，这个功能就很适合使用在触发元素和展示内容元素是分开的场景。通常我们使用 #reference 来放置我们的触发元素， 用 triggering-element API，您可以任意设置您的触发元素 但注意到触发元素应该是接受 mouse 和 keyboard 事件的元素。
WARNING
v-popover 将被废弃，请使用 virtual-ref 作为替代。
内容可扩展
可以在 Popover 中嵌套其它组件， 以下为嵌套表格的例子。
嵌套操作
当然，你还可以嵌套操作， 它比使用dialog更加轻量。
指令
您可以使用指令性方式弹出窗口，但这种方法不再推荐 ，因为这使得应用程序变得复杂， 您可以参考虚拟触发来实现一样的效果。
Attributes
| 属性名 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| trigger | 触发方式 | string | click/focus/hover/contextmenu | hover |
| title | 标题 | string | — | — |
| effect | Tooltip 主题，Element Plus 内置了 dark / light 两种主题 | string | string | light |
| content | 显示的内容，也可以通过写入默认 slot 修改显示内容 | string | — | — |
| width | 宽度 | string / number | — | 最小宽度 150px |
| placement | 出现位置 | string | top/top-start/top-end/bottom/bottom-start/bottom-end/left/left-start/left-end/right/right-start/right-end | bottom |
| disabled | Popover 是否可用 | boolean | — | false |
| visible / v-model:visible | Popover 是否显示 | Boolean | — | false |
| offset | 出现位置的偏移量 | number | — | 0 |
| transition | 定义渐变动画 | string | — | el-fade-in-linear |
| show-arrow | 是否显示 Tooltip 箭头， 欲了解更多信息，请参考 ElPopper | boolean | — | true |
| popper-options | popper.js 的参数 | object | 详情参考 popper.js | {modifiers: [{name: 'computeStyles',options: {gpuAcceleration: false}}]} |
| popper-class | 为 popper 添加类名 | string | — | — |
| popper-style | 为 popper 自定义样式 | string / object | — | — |
| show-after | 在触发后多久显示内容，单位毫秒 | number | — | 0 |
| hide-after | 延迟关闭，单位毫秒 | number | — | 200 |
| auto-close | tooltip 出现后自动隐藏延时，单位毫秒 | number | — | 0 |
| tabindex | Popover 组件的 tabindex | number | — | — |
| teleported | 是否将 popover 的下拉列表插入至 body 元素 | boolean | true / false | true |
| persistent | 当 popover 组件长时间不触发且 persistent 属性设置为 false 时, popover 将会被删除 | boolean | — | true |
Slots
| 插槽名 | 说明 |
|---|---|
| — | Popover 内嵌 HTML 文本 |
| reference | 触发 Popover 显示的 HTML 元素 |
Events
| 事件名 | 说明 | 回调参数 |
|---|---|---|
| show | 显示时触发 | — |
| before-enter | 显示动画播放前触发 | — |
| after-enter | 显示动画播放完毕后触发 | — |
| hide | 隐藏时触发 | — |
| before-leave | 隐藏动画播放前触发 | — |
| after-leave | 隐藏动画播放完毕后触发 | — |