Popover

Placement

Popover has 9 placements.

Use attribute content to set the display content when hover. The attribute placement determines the position of the Popover. Its value is [orientation]-[alignment] with four orientations top, left, right, bottom and three alignments start, end, null, and the default alignment is null. Take placement="left-end" for example, Popover will display on the left of the element which you are hovering and the bottom of the Popover aligns with the bottom of the element.

vue

<template>
  <div class="popover-base-box">
    <div class="row center">
      <el-popover
        title="Title"
        content="Top Left prompts info"
        placement="top-start"
      >
        <template #reference>
          <el-button>top-start</el-button>
        </template>
      </el-popover>
      <el-popover
        title="Title"
        content="Top Center prompts info"
        placement="top"
      >
        <template #reference>
          <el-button>top</el-button>
        </template>
      </el-popover>
      <el-popover
        title="Title"
        content="Top Right prompts info"
        placement="top-end"
      >
        <template #reference>
          <el-button>top-end</el-button>
        </template>
      </el-popover>
    </div>
    <div class="row">
      <el-popover
        title="Title"
        content="Left Top prompts info"
        placement="left-start"
      >
        <template #reference>
          <el-button>left-start</el-button>
        </template>
      </el-popover>
      <el-popover
        title="Title"
        content="Right Top prompts info"
        placement="right-start"
      >
        <template #reference>
          <el-button>right-start</el-button>
        </template>
      </el-popover>
    </div>
    <div class="row">
      <el-popover
        title="Title"
        content="Left Center prompts info"
        placement="left"
      >
        <template #reference>
          <el-button class="mt-3 mb-3">left</el-button>
        </template>
      </el-popover>
      <el-popover
        title="Title"
        content="Right Center prompts info"
        placement="right"
      >
        <template #reference>
          <el-button>right</el-button>
        </template>
      </el-popover>
    </div>
    <div class="row">
      <el-popover
        title="Title"
        content="Left Bottom prompts info"
        placement="left-end"
      >
        <template #reference>
          <el-button>left-end</el-button>
        </template>
      </el-popover>
      <el-popover
        title="Title"
        content="Right Bottom prompts info"
        placement="right-end"
      >
        <template #reference>
          <el-button>right-end</el-button>
        </template>
      </el-popover>
    </div>
    <div class="row center">
      <el-popover
        title="Title"
        content="Bottom Left prompts info"
        placement="bottom-start"
      >
        <template #reference> <el-button>bottom-start</el-button></template>
      </el-popover>
      <el-popover
        title="Title"
        content="Bottom Center prompts info"
        placement="bottom"
      >
        <template #reference> <el-button>bottom</el-button></template>
      </el-popover>
      <el-popover
        title="Title"
        content="Bottom Right prompts info"
        placement="bottom-end"
      >
        <template #reference>
          <el-button>bottom-end</el-button>
        </template>
      </el-popover>
    </div>
  </div>
</template>

<style>
.popover-base-box {
  width: 600px;
}

.popover-base-box .row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.popover-base-box .center {
  justify-content: center;
}
</style>

Uso básico

Popover is built with ElTooltip. Así que para algunos atributos duplicados, por favor consulte la documentación del Tooltip.

El atributo trigger es usado para definir como el popover se dispara: hover, click, focus o contextmenu. Si quieres controlarlo manualmente, puedes establecer :visible.

Activación virtual

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 virtual-ref 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 está a punto de ser obsoleta, por favor use virtual-ref como alternativa.

Contenido rico

Otros componentes/elementos pueden ser anidados en el popover. A continuación se muestra un ejemplo de tabla anidada.

Reemplaza el atributo content con un default slot.

vue

<template>
  <div style="display: flex; align-items: center">
    <el-popover placement="right" :width="400" trigger="click">
      <template #reference>
        <el-button style="margin-right: 16px">Click to activate</el-button>
      </template>
      <el-table :data="gridData">
        <el-table-column width="150" property="date" label="date" />
        <el-table-column width="100" property="name" label="name" />
        <el-table-column width="300" property="address" label="address" />
      </el-table>
    </el-popover>

    <el-popover
      :width="300"
      popper-style="box-shadow: rgb(14 18 22 / 35%) 0px 10px 38px -10px, rgb(14 18 22 / 20%) 0px 10px 20px -15px; padding: 20px;"
    >
      <template #reference>
        <el-avatar src="https://avatars.githubusercontent.com/u/72015883?v=4" />
      </template>
      <template #default>
        <div
          class="demo-rich-conent"
          style="display: flex; gap: 16px; flex-direction: column"
        >
          <el-avatar
            :size="60"
            src="https://avatars.githubusercontent.com/u/72015883?v=4"
            style="margin-bottom: 8px"
          />
          <div>
            <p
              class="demo-rich-content__name"
              style="margin: 0; font-weight: 500"
            >
              Element Plus
            </p>
            <p
              class="demo-rich-content__mention"
              style="margin: 0; font-size: 14px; color: var(--el-color-info)"
            >
              @element-plus
            </p>
          </div>

          <p class="demo-rich-content__desc" style="margin: 0">
            Element Plus, a Vue 3 based component library for developers,
            designers and product managers
          </p>
        </div>
      </template>
    </el-popover>
  </div>
</template>

<script lang="ts" setup>
const gridData = [
  {
    date: '2016-05-02',
    name: 'Jack',
    address: 'New York City',
  },
  {
    date: '2016-05-04',
    name: 'Jack',
    address: 'New York City',
  },
  {
    date: '2016-05-01',
    name: 'Jack',
    address: 'New York City',
  },
  {
    date: '2016-05-03',
    name: 'Jack',
    address: 'New York City',
  },
]
</script>

Operación anidada

Por supuesto, puede anidar otras operaciones. Es más ligero que usar un dialog.

Directivas

Aún puede usar popover en la forma de directiva, pero esto no es recomendable, ya que esto hace que su aplicación sea complicada, puede referirse la Activación virtual para más información.

API

Atributos

Nombre	Descripción	Tipo	Default
trigger	how the popover is triggered, not valid in controlled mode	`enum` / `array`	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	título del popover	`string`	—
effect	Popover tiene dos temas: `dark` y `light`	`enum` / `string`	light
content	contenido del popover, puede ser sustituido por un default `slot`	`string`	''
width	ancho del popover	`string` / `number`	150
placement	posición del popover	`enum`	bottom
disabled	si el popover está deshabilitado	`boolean`	false
visible / v-model:visible	si el popover está 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	si una flecha del tooltip es mostrada o no. Para obtener más información, consulte ElPopper	`boolean`	true
popper-options	parámetros para popper.js	`object`	`{modifiers: [{name: 'computeStyles',options: {gpuAcceleration: false}}]}`
popper-class	nombre de clase personalizada para el componente	`string`	—
popper-style	estilo personalizado para el 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 del Popover	`number` / `string`	0
teleported	si el desplegable del popover se teletransporta al body	`boolean`	true
append-to 2.9.10	which element the popover CONTENT appends to	`CSSSelector` / `HTMLElement`	body
persistent	cuando el popover esté inactivo y `persistent` sea `false`, el popover será destruido	`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	Inherits all attributes from Tooltip	—	—

Slots

Nombre	Descripción	Type
default	content of popover, version 2.13.4 and later can receive the hide parameter.	`object`
reference	HTML element that triggers popover, only a single root element is accepted	-

Eventos

Name	Descripción	Type
show	se dispara cuando se muestra el popover	`Function`
before-enter	se dispara cuando la transición de entrada comienza	`Function`
after-enter	se dispara cuando la transición de entrada termina	`Function`
hide	se dispara cuando se oculta el popover	`Function`
before-leave	se dispara cuando la transición de salida comienza	`Function`
after-leave	se dispara cuando la transición de salida termina	`Function`