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:

<a href="#" data-toggle="popover" title="Popover Header" data-content="Algún contenido

dentro del popover">Active el popover</a>

Nota: Los Popovers deben inicializar con jQuery: seleccionar el elemento especificado y llamar el
método popover() .

<script>
$(document).ready(function(){
$('[data-toggle="popover"]').popover();
});
</script>

Ver: 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:
 GERENCIA VIRTUAL
“Capacitación y asesoría a solo un click”

<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>

Ver: 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:

<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>

Ver: 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":

<a href="#" title="Header" data-toggle="popover" data-trigger="hover" data-

content="Some content">Pasa sobre mi</a>

Ver: Código 184.html