El componente Popover es similar a la información sobre Tooltip. 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.
Crear un popover
Para crear un popover, agrega el atributo data-toggle = «popover» a un elemento.
Usa el atributo title para especificar el texto del encabezado del popover, y usa atributo data-content para especificar el texto que debe mostrarse dentro del cuerpo del popover.
Ejm
<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: selecciona el elemento especificado y llama al método popover().
El siguiente código habilitará todos los popovers en el documento.
<script>
$(document).ready(function(){
$('[data-toggle="popover"]').popover();
});
</script>
Posición de los popovers
Por defecto, el popover aparecerá en el lado derecho del elemento.
Usa el atributo de colocación de datos para establecer la posición del popover en la parte superior, inferior, izquierda o derecha del elemento.
Ejm
<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 esperas si no hay suficiente espacio para ellos. Por ejemplo: si usas la ubicación superior en la parte superior de una página (donde no hay espacio para ello), en su lugar, mostrará el popover debajo del elemento o a la derecha (donde sea que haya espacio para él).
Cerrando popovers
Por defecto, el popover se cierra cuando haces clic nuevamente en el elemento. Sin embargo, puedes usar el atributo data-trigger = «focus» que cerrará el popover al hacer clic fuera del elemento.
Si deseas que se muestre el popover cuando mueva el puntero del mouse sobre el elemento, usa el atributo disparador de datos con un valor de «hover».
Ejm
<a href="#" title="Header" data-toggle="popover" data-trigger="hover"
data-content="Some content">Hover over me</a>