Bootstrap4 Popover
El control popover es similar al tooltip; se muestra cuando se hace clic en el elemento. A diferencia del tooltip, puede mostrar más contenido.
Cómo crear un popover
Agregando al elementodata-toggle="popover"para crear un popover.
titleEl contenido del atributo es el título del popover,data-contentel atributo muestra el contenido de texto del popover:
<a href="#" data-toggle="popover" title="Título del popover" data-content="Contenido del popover">Haz clic en mí varias veces</a>
Nota:El popover debe escribirse en el código de inicialización de jQuery: luego, en el elemento especificado, llame alpopover()método.
El siguiente ejemplo puede usar el popover en cualquier lugar del documento:
Ejemplo
$(document).ready(function(){
$('[data-toggle="popover"]').popover();
});
Pruébalo »
Especificar la posición del popover
De forma predeterminada, el popover se muestra en el lado derecho del elemento.
Puede usardata-placementel atributo para establecer la dirección en la que se muestra el popover: top, bottom, left o right:
Ejemplo
<a href="#" title="Header" data-toggle="popover" data-placement="top" data-content="Content">Haz clic en mí</a>
<a href="#" title="Header" data-toggle="popover" data-placement="bottom" data-content="Content">Haz clic en mí</a>
<a href="#" title="Header" data-toggle="popover" data-placement="left" data-content="Content">Haz clic en mí</a>
<a href="#" title="Header" data-toggle="popover" data-placement="right" data-content="Content">Haz clic en mí</a>
Pruébalo »
Uso en botones:
Ejemplo
<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
Popover on top
</button>
<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
Popover on right
</button>
<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Vivamus
sagittis lacus vel augue laoreet rutrum faucibus.">
Popover on bottom
</button>
<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
Popover on left
</button>
Pruébalo »
Cerrar el popover
De forma predeterminada, el popover se cierra al hacer clic nuevamente en el elemento especificado. Puede usardata-trigger="focus"el atributo para configurar el cierre del popover al hacer clic en un área fuera del elemento:
Ejemplo
<a href="#" title="Cancelar el popover" data-toggle="popover" data-trigger="focus" data-content="Haz clic en otro lugar del documento para cerrarme">Haz clic en mí</a>
Pruébalo »
Consejo:Si desea lograr el efecto de mostrar al mover el mouse sobre el elemento y desaparecer al quitarlo, puede usardata-triggerel atributo y establezca el valor en "hover":
Ejemplo
<a href="#" title="Header" data-toggle="popover" data-trigger="hover" data-content="Algún contenido">Mueve el mouse sobre mí</a>
Pruébalo » Otras extensiones