Popover (cuadro emergente)

Capa de información que se activa al hacer clic o al pasar el cursor. 12 posiciones, cuatro formas de activación, flecha y anchura personalizables.

Cuadro emergente

<template>
  <div class="demo-col" style="padding: 40px 0">
    <div class="demo-row" style="gap: 24px; flex-wrap: wrap; justify-content: center">
      <LhPopover title="Título" content="Activación por click (predeterminado)" placement="top">
        <LhButton>click arriba</LhButton>
      </LhPopover>
      <LhPopover content="Activación por click" placement="right" trigger="click">
        <LhButton>click a la derecha</LhButton>
      </LhPopover>
      <LhPopover content="Activación por focus" placement="bottom" trigger="focus">
        <LhButton>focus abajo</LhButton>
      </LhPopover>
      <LhPopover content="Flecha desactivada + anchura personalizada" placement="left" :arrow="false" :width="240">
        <LhButton>Sin flecha, izquierda</LhButton>
      </LhPopover>
      <LhPopover content="Posicionamiento estricto según left" placement="left" :flip="false">
        <LhButton>flip=false</LhButton>
      </LhPopover>
    </div>
    <p class="demo-note">La activación manual se combina con :visible.sync para controlarla a mano; disabled impide la aparición; popperClass aplica una clase personalizada.</p>
    <div class="demo-row" style="gap: 24px; flex-wrap: wrap; justify-content: center">
      <LhPopover :visible.sync="manual" content="Controlada por el botón de alternancia" placement="top" trigger="manual">
        <LhButton @click="manual = !manual">Interruptor manual ({{ manual ? 'Activado' : 'Desactivado' }})</LhButton>
      </LhPopover>
      <LhPopover content="Estado deshabilitado" disabled>
        <LhButton disabled>disabled</LhButton>
      </LhPopover>
      <LhPopover content="Muestra/ocultación diferidas" placement="top" :show-after="300" :hide-after="500">
        <LhButton>showAfter/hideAfter</LhButton>
      </LhPopover>
    </div>
  </div>
</template>

<script>
export default {
  data: () => ({
    manual: false,
  }),
}
</script>

Props

Propiedad	Descripción	Tipo	Predeterminado
placement	Posición de muestra	'top' \| 'top-start' \| 'top-end' \| 'bottom' \| 'bottom-start' \| 'bottom-end' \| 'left' \| 'left-start' \| 'left-end' \| 'right' \| 'right-start' \| 'right-end'	'top'
flip	Si se voltea la dirección cuando falta espacio en el eje principal (activado por defecto); con false, se respeta estrictamente placement y se permite desbordar de la ventana	boolean	true
trigger	Forma de activación	'click' \| 'hover' \| 'focus' \| 'manual'	'hover'
title	Título	string	—
visible	Estado de muestra controlado manualmente (:visible.sync)	boolean	—
disabled	Si se deshabilita	boolean	false
arrow	Si se muestra la flecha	boolean	true
width	Anchura de la capa emergente	string \| number	—
popperClass	Clase personalizada de la capa emergente	string	—
teleportTarget	Destino de montaje de la capa emergente (selector o elemento; body por defecto; en 2.7 no hay Teleport, se implementa moviendo el host)	string \| HTMLElement	—
showAfter	Tiempo de muestra diferido (ms)	number	—
hideAfter	Tiempo de ocultación diferido (ms)	number	—
themeVars	Variables de tema a nivel de componente; sobrescribe la configuración de ConfigProvider	Record<string, string>	—
bgPattern	Patrón de fondo a nivel de componente; sobrescribe la configuración de ConfigProvider	string	—
sx	Propiedad de diseño rápido sx (se aplica al elemento raíz del activador)	—	—

Slots

Slot	Descripción
default	Activador
title	Zona del título (toma el prop title por defecto)
content	Cuerpo del globo (si no se pasa, toma el prop content)