El Popover Plugin
El Popover plugin es similar a la información de herramientas; 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.
Tip: Los complementos pueden ser incluidos de forma individual (usando Bootstrap's individuales "popover.js" de archivos), o todos a la vez (utilizando "bootstrap.js" o "bootstrap.min.js" ).
Cómo crear un Popover
Para crear un popover , agregar la data-toggle="popover" atributo a un elemento.
Utilice el title atributo para especificar el texto de la cabecera de la popover, y el uso de la data-content atributo para especificar el texto que se debe mostrar el interior de la popover's cuerpo:
<a href="#" data-toggle="popover" title=" Popover
Header" data-content="Some
content inside the popover">Toggle popover</a> Nota: Popovers deben inicializarse con jQuery: seleccionar el elemento especificado y llaman la popover() método.
El siguiente código permitirá a todos los popovers en el documento:
Ejemplo
<script>
$(document).ready(function(){
$('[data-toggle="popover"]').popover();
});
</script>
Inténtalo tú mismo " posicionamiento Popovers
Por defecto, el popover aparecerá en el lado derecho del elemento.
Utilice la data-placement de atributos para definir la posición de la popover en la parte superior, inferior, izquierdo o el lado derecho 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>
Inténtalo tú mismo " Consejo: También puede utilizar el atributo de ubicación de los datos con un valor de "auto" , que le permitirá al navegador decidir la posición del popover . Por ejemplo, si el valor es "auto left" , el popover mostrará en el lado izquierdo, cuando sea posible, de otro modo a la derecha.
cerrando Popovers
Por defecto, el popover se cierra cuando se hace clic en el elemento de nuevo. Sin embargo, se puede utilizar el data-trigger="focus" atributo que cerrará la popover 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>
Inténtalo tú mismo " Consejo: Si desea que el popover que se mostrará cuando se mueve el puntero del ratón sobre el elemento, utilice el data-trigger atributo con un valor de "hover" :
Ejemplo
<a href="#" title="Header" data-toggle="popover"
data-trigger="hover" data-content="Some content">Hover
over me</a>
Inténtalo tú mismo " Completar Bootstrap Popover Referencia
Para una referencia completa de todos los popover opciones, métodos y eventos, visite nuestro Bootstrap JS Popover de referencia .