El documento describe el componente Popover de Bootstrap, una ventana emergente que aparece cuando el usuario hace clic en un elemento. Explica cómo crear un Popover asignando atributos como data-toggle, title y data-content al elemento, y cómo inicializarlo con jQuery. También cubre cómo establecer la posición del Popover y los modos de cierre.

1. GERENCIA VIRTUAL
“Capacitación y asesoría a solo un click”
Popover en BOOTSTRAP
El componente Popover es similar al mensaje de ayuda; se trata de 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.
Cómo crear un Popover
Para crear un popover, se debe añadir el atributo data-toggle="popover" un elemento.
Utilice el atributo title para especificar el texto de la cabecera del popover, el atributo data-
content para especificar el texto que se debe mostrar dentro del cuerpo del popover:
Nota: Los Popovers deben inicializar con jQuery: seleccionar el elemento especificado y llamar el
método popover() .
Código 181.html
La posición del Popover
Por defecto, el popover aparecerá en el lado derecho del elemento.
Utilice el atributo data-placement para establecer la posición del popover en la parte superior,
inferior, izquierdo o el lado derecho del elemento:
<a href="#" data-toggle="popover" title="Popover Header" data-content="Algún contenido
dentro del popover">Active el popover</a>
<script>
$(document).ready(function(){
$('[data-toggle="popover"]').popover();
});
</script>

2. GERENCIA VIRTUAL
“Capacitación y asesoría a solo un click”
Código 182.html
El Cierre de Popovers
Por defecto, el popover se cierra cuando se hace clic de nuevo en el elemento. Sin embargo, se
puede utilizar el atributo data-trigger="focus" que cerrará el popover al hacer clic fuera del
elemento:
Código 183.html
Consejo: Si desea que el popover muestre cuando se mueva el puntero del ratón sobre el
elemento, utiliza el atributo data-trigge con un valor de "float":
Código 184.html
<a href="#" title="Encabezado" data-toggle="popover" data-placement="top" data-
content="Content">Click</a>
<a href="#" title=" Encabezado " data-toggle="popover" data-placement="bottom" data-
content="Content">Click</a>
<a href="#" title=" Encabezado " data-toggle="popover" data-placement="left" data-
content="Content">Click</a>
<a href="#" title=" Encabezado " data-toggle="popover" data-placement="right" data-
content="Content">Click</a>
<a href="#" title="Header" data-toggle="popover" data-trigger="hover" data-
content="Some content">Pasa sobre mi</a>
<a href="#" title="Dismissible popover" data-toggle="popover" data-
trigger="focus" data-content="Click en cualquier parte en el document y cierra
este popover" Haz click</a>