Bootstrap JS Popover

JS Popover

El componente Popover es similar a la información sobre herramientas, Es un cuadro emergente que aparece cuando el usuario hace clic en un elemento. La diferencia es que el popover puede contener mucho más contenido.

Habilitar vía atributos data-*

data-toggle=”popover” activa el popover. El atributo title especifica el texto de cabecera del popover. El atributo data-content especifica el texto que debe ser mostrado dentro del cuerpo del popover.

Ejm

<a href=”#” data-toggle=”popover” title=”Popover Header” data-content=”Some content inside the popover”>Toggle popover</a>

Ejm completo

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container mt-3">
  <h3>Popover Example</h3>
  <p>Popovers must be initialized with jQuery: select the specified element and call the popover() method.</p>
  <a href="#" data-toggle="popover" title="Popover Header" data-content="Some content inside the popover">Toggle popover</a>
</div>

<script>
$(document).ready(function(){
  $('[data-toggle="popover"]').popover();   
});
</script>

</body>
</html>

Via JavaScript

Los popovers no son complementos solo de CSS y, por lo tanto, deben inicializarse con jQuery: selecciona el elemento especificado y llama al método popover().

Ejm

// Seleccionamos todos los elementos con data-toggle="popover" en el documento
$('[data-toggle="popover"]').popover(); 

// Seleccionamos un elemento específico
$('#myPopover').popover();

Opciones Popover

Nombre Tipo Por defecto Descripción
animation boolean true Especifica si se debe agregar un efecto de transición de desvanecimiento CSS al abrir y cerrar el popover

verdadero: agrega un efecto de desvanecimiento
falso: no agregue un efecto de desvanecimiento

container false Agrega el popover a un elemento específico.
Ejemplo: contenedor: ‘body’
content string Especifica el cuerpo dentro del contenedor ‘body’
delay number, object 0 Especifica el número de milisegundos que se necesitarán para abrir y cerrar el popover.

Para especificar un retraso para abrir y otro para cerrar, use la estructura de objeto:

retraso: {show: 500, hide: 100}, que tomará 500 ms para abrir el popover, pero solo 100 ms para cerrarlo

html boolean false Especifica si se aceptan etiquetas HTML en la ventana emergente:

true: acepta etiquetas HTML
falso: no acepte etiquetas HTML

Nota: El HTML debe insertarse en el atributo de título (o utilizando la opción de título).

Cuando se establece en falso (predeterminado), se usará el método text () de jQuery. Use esto si le preocupan los ataques XSS

placement string ‘right’ Especifica la posición de popover. Valores posibles:

  • “top” – Popover en la parte superior
  • “bottom” – Popover en el fondo
  • “left” – Popover a la izquierda
  • “derecha” – Popover a la derecha
  • “auto”: permite que el navegador decida la posición del popover.

Por ejemplo, si el valor es “auto izquierda”, el popover se mostrará en el lado izquierdo cuando sea posible, de lo contrario a la derecha. Si el valor es “fondo automático”, el popover se mostrará en la parte inferior cuando sea posible, de lo contrario en la parte superior

selector string o bolooean false false Añade el popover a un selector especifico
template string Base HTML para usar al crear el popover.

El título del popover se inyectará en el .popover-header

El contenido del popover se inyectará en el .popover-body

.arrow se convertirá en la flecha del popover.

El elemento envoltorio más externo debe tener la clase .popover.

title string Especifica el texto de encabezado del popover
trigger string ‘click’ Especifica cómo se activa el popover. Valores posibles:

  • “clic” – Activa el popover con un clic
  • “hover” – Activa el popover al pasar el mouse
  • “focus”: activa el popover cuando obtiene el foco (tabulando o haciendo clic en .e.g)
  • “manual” – Activa el popover manualmente

Consejo: para pasar varios valores, sepárelos con un espacio

offset number o string 0 Desplazamiento del popover en relación con su objetivo
fallbackPlacement string o array ‘flip’ Especifica qué posición utilizará Popper en la reserva
boundary string o element ‘scrollparent’ Límite de restricción de desbordamiento del popover. Acepta los valores “viewport”, “window” o “scrollParent”, o un elemento HTML

Métodos Popover

La siguiente tabla lista los posibles métodos Popover.

Método Descripción
.popover(options) Activa el popover con una opción. Ver opciones anteriores para valores válidos
.popover(“show”) Muestra el popover
.popover(“hide”) Oculta el popover
.popover(“toggle”) Alterna el popover
.popover(“dispose”) Oculta y destruye el popover
.popover(“enable”) Permite al popover la capacidad de mostrarse. Es la opción por defecto
.popover(“disable”) Elimina la capacidad de mostrar un popover. El popover solo se puede mostrar si se vuelve a habilitar
.popover(“toggleEnabled”) Alterna la capacidad de mostrar u ocultar el popover
.popover(“update”) Actualiza la posición del popover

Eventos Popover

La siguiente tabla lista los posibles eventos Popover

Evento Descripción
show.bs.popover Se produce cuando el popover está a punto de mostrarse
shown.bs.popover Se produce cuando el popover se muestra completamente (después de que se hayan completado las transiciones CSS)
hide.bs.popover Ocurre cuando el popover está a punto de ocultarse
hidden.bs.popover Se produce cuando el popover está completamente oculto (después de que se hayan completado las transiciones CSS)
inserted.bs.popover Se produce después del evento show.bs.popover cuando la plantilla de popover se ha agregado al DOM