Complemento Bootstrap Popover
El complemento Popover
El complemento 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.
Sugerencia: los complementos se pueden incluir individualmente (usando el archivo "popover.js" individual de Bootstrap) o todos a la vez (usando "bootstrap.js" o "bootstrap.min.js").
Cómo crear un popover
Para crear un popover, agregue el data-toggle="popover"
atributo a un elemento.
Use el titleatributo para especificar el texto del encabezado de la ventana emergente y use el data-contentatributo para especificar el texto que debe mostrarse dentro del cuerpo de la ventana emergente:
<a href="#" data-toggle="popover" title="Popover Header" data-content="Some content inside the popover">Toggle popover</a>
Nota: los popovers deben inicializarse con jQuery: seleccione el elemento especificado y llame al popover()método.
El siguiente código habilitará todos los popovers en el documento:
Ejemplo
<script>
$(document).ready(function(){
$('[data-toggle="popover"]').popover();
});
</script>
Ventanas emergentes de posicionamiento
De forma predeterminada, la ventana emergente aparecerá en el lado derecho del elemento.
Utilice el data-placementatributo para establecer la posición de la ventana emergente en la parte superior, inferior, izquierda o derecha del elemento:
Ejemplo
<a href="#" title="Header" data-toggle="popover" data-placement="top" data-content="Content">Click</a>
<a href="#" title="Header" data-toggle="popover" data-placement="bottom" data-content="Content">Click</a>
<a href="#" title="Header" data-toggle="popover" data-placement="left" data-content="Content">Click</a>
<a href="#" title="Header" data-toggle="popover" data-placement="right" data-content="Content">Click</a>
Sugerencia: también puede usar el atributo de ubicación de datos con un valor de "automático", que permitirá que el navegador decida la posición de la ventana emergente. Por ejemplo, si el valor es "izquierda automática", la ventana emergente se mostrará en el lado izquierdo cuando sea posible, de lo contrario, en el derecho.
Ventanas emergentes de cierre
De forma predeterminada, la ventana emergente se cierra cuando vuelve a hacer clic en el elemento. Sin embargo, puede usar el data-trigger="focus"atributo que cerrará la ventana emergente al hacer clic fuera del elemento:
Ejemplo
<a href="#" title="Dismissible popover" data-toggle="popover" data-trigger="focus" data-content="Click anywhere in the document to close this popover">Click me</a>
Sugerencia: si desea que se muestre la ventana emergente cuando mueva el puntero del mouse sobre el elemento, use el data-triggeratributo con un valor de "desplazamiento":
Ejemplo
<a href="#" title="Header" data-toggle="popover" data-trigger="hover" data-content="Some content">Hover over me</a>
Referencia completa de Bootstrap Popover
Para obtener una referencia completa de todas las opciones, métodos y eventos de popover, vaya a nuestra referencia de Bootstrap JS Popover .