Popover

Componente de interfaz de usuario que muestra contenido adicional o información emergente cuando un usuario realiza una acción específica, como hacer clic en un elemento o pasar el mouse sobre él. Por lo general, los popovers suelen ser pequeñas ventanas emergentes que aparecen junto a un elemento de la página, como un botón, un enlace o un icono, y proporcionan información adicional o opciones relacionadas con ese elemento.

Example

<Popover>
  <div slot='content'>Simple popover.</div>
</Popover>

Usage

Para el funcionamiento del popover, debe agregar la prop data-toggle al elemento que activará el popover. El valor de la prop data-toggle debe ser el id del popover. Si esto no se cumple, el popover no funcionará.

<Button data-toggle='popover-example'>Popover toggle</Button>
<Popover id='popover-example' placement='top'>
  <div slot='content' class="p-6 text-gray-500">Simple popover.</div>
</Popover>

Initial open

Para inicializar el popover abierto, agregue la prop initialOpen. Esto es útil para mostrar un popover en la carga de la página o en respuesta a una acción del usuario.

<Button data-toggle='popover-initial-open'>Popover toggle</Button>
<Popover id='popover-initial-open' initialOpen placement='top' divider>
  <div slot='content' class='p-4'>
    <h2 >Popover header</h2>
    <p class="text-sm text-gray-500">This is a popover body.</p>
  </div>
</Popover>

Placement

Los popover pueden tener diferentes posiciones. La posición predeterminada es top. Las posiciones disponibles son: top, top-start, top-end, bottom, bottom-start, bottom-end, left, left-start, left-end, right, right-start y right-end. Puede usar la prop placement para establecer la posición.

<Button data-toggle='popover-example'>Right end</Button>
<Popover id='popover-example' placement='right-end'>
  <h3 slot='title'>Popover header</h3>
  <p slot='body' class="text-sm text-gray-500">This is a popover body.</p>
  <p slot='footer' class="text-sm text-gray-500">Popover footer.</p>
</Popover>

Modify the content

<Button data-toggle='popover-example'>Popover toggle</Button>
<Popover id='popover-example'>
  <div slot='content' class='p-4'>
    <h2 >Popover header</h2>
    <p class="text-sm text-gray-500">This is a popover body.</p>
  </div>
</Popover>

<Popover id='popover-example'>
  <h3 slot='title' class="astroui-popover-title">Popover header</h3>
  <p slot='body' class="text-sm text-gray-500">This is a popover body. Here's some more content.</p>
  <p slot='footer' class="text-sm text-gray-500">Popover footer.</p>
</Popover>

Border

<Popover border={true} id='popover-example'>
  <h3 slot='title' class="astroui-popover-title" >Popover header</h3>
  <p slot='body' class="text-sm text-gray-500">This is a popover body. Here's some more content.</p>
  <p slot='footer' class="text-sm text-gray-500">Popover footer.</p>
</Popover>

Previous Modal Next Radio

Astro ui