Bootstrap 4 ventana emergente
Bootstrap 4 ventana emergente
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.
Alternar ventana emergenteCó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>
Nota: Los atributos de ubicación no funcionan como espera si no hay suficiente espacio para ellos. Por ejemplo: si usa la ubicación superior en la parte superior de una página (donde no hay espacio para él), en su lugar, mostrará la ventana emergente debajo del elemento o a la derecha (donde sea que haya espacio para él).
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 .