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
$('[data-toggle="popover"]').popover();
$('#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 |