Bootstrap - Complemento Popover

La ventana emergente es similar a la información sobre herramientas, que ofrece una vista ampliada completa con un encabezado. Para que se active el popover, el usuario solo necesita colocar el cursor sobre el elemento. El contenido de la ventana emergente se puede completar por completo utilizando Bootstrap Data API. Este método requiere información sobre herramientas.

Si desea incluir esta funcionalidad de complemento individualmente, necesitará el popover.jsy tiene una dependencia del complemento de información sobre herramientas . De lo contrario, como se menciona en el capítulo Descripción general de los complementos de Bootstrap , puede incluir bootstrap.js o bootstrap.min.js minificado .

Uso

El complemento popover genera contenido y marcado a pedido y, de forma predeterminada, coloca el popover después de su elemento disparador. Puede agregar popover de las siguientes dos formas:

Via data attributes - Para agregar un popover, agregue data-toggle = "popover"a una etiqueta de ancla / botón. El título del ancla será el texto de un popover. De forma predeterminada, el plugin establece popover en la parte superior.

<a href = "#" data-toggle = "popover" title = "Example popover">
   Hover over me
</a>

Via JavaScript - Habilite popovers a través de JavaScript usando la siguiente sintaxis -

$('#identifier').popover(options)

El complemento Popover NO es solo complementos CSS como el menú desplegable u otros complementos discutidos en capítulos anteriores. Para usar este complemento, DEBE activarlo usando jquery (lea javascript). Para habilitar todos los elementos emergentes en su página, simplemente use este script:
$(function () { $("[data-toggle = 'popover']").popover(); });

Ejemplo

El siguiente ejemplo demuestra el uso del complemento popover mediante atributos de datos.

<div class = "container" style = "padding: 100px 50px 10px;" >
   <button type = "button" class = "btn btn-default" title = "Popover title"  
      data-container = "body" data-toggle = "popover" data-placement = "left" 
      data-content = "Some content in Popover on left">
      
      Popover on left
   </button>
   
   <button type = "button" class = "btn btn-primary" title = "Popover title"  
      data-container = "body" data-toggle = "popover" data-placement = "top" 
      data-content = "Some content in Popover on top">
      
      Popover on top
   </button>
   
   <button type = "button" class = "btn btn-success" title = "Popover title"  
      data-container = "body" data-toggle = "popover" data-placement = "bottom" 
      data-content = "Some content in Popover on bottom">
      
      Popover on bottom
   </button>
   
   <button type = "button" class = "btn btn-warning" title = "Popover title"  
      data-container = "body" data-toggle = "popover" data-placement = "right" 
      data-content = "Some content in Popover on right">
      
      Popover on right
   </button>
   
</div>

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

Opciones

Hay ciertas opciones que se pueden agregar a través de Bootstrap Data API o invocar a través de JavaScript. La siguiente tabla enumera las opciones:

Nombre de opción	Tipo / Valor predeterminado	Nombre del atributo de datos	Descripción
animación	booleano predeterminado - verdadero	animación de datos	Aplica una transición de atenuación CSS a la ventana emergente.
html	booleano Predeterminado - falso	datos-html	Inserta HTML en el popover. Si es falso, se usará el método de texto de jQuery para insertar contenido en el dom. Utilice texto si le preocupan los ataques XSS.
colocación	cadena \| función Predeterminado - arriba	colocación de datos	Especifica cómo colocar el popover (es decir, arriba \| abajo \| izquierda \| derecha \| automático). Cuando se especifica auto , reorientará dinámicamente el popover. Por ejemplo, si la ubicación es "automáticamente a la izquierda", la ventana emergente se mostrará a la izquierda cuando sea posible; de lo contrario, se mostrará a la derecha.
selector	cadena Por defecto - falso	selector de datos	Si se proporciona un selector, los objetos popover se delegarán a los destinos especificados.
título	cadena \| función predeterminada - "	título de datos	La opción de título es el valor de título predeterminado si el atributo de título no está presente.
desencadenar	string Default - 'hover focus'	disparador de datos	Define cómo se activa el popover - click\| hover \| focus \| manual. Puede pasar varios factores desencadenantes; sepárelos con un espacio.
retrasar	numero \| objeto Predeterminado - 0	retraso de datos	Retrasos que muestran y ocultan la ventana emergente en ms: no se aplica al tipo de disparo manual. Si se proporciona un número, se aplica un retraso tanto para ocultar como para mostrar. La estructura del objeto es - `delay: { show: 500, hide: 100 }`
envase	cadena \| falso Por defecto - falso	contenedor de datos	Agrega el popover a un elemento específico. Ejemplo: contenedor: 'cuerpo'

Métodos

Los siguientes son algunos métodos útiles para popover:

Método	Descripción	Ejemplo
Options - .popover (opciones)	Adjunta un controlador de popover a una colección de elementos.	`$().popover(options)`
Toggle - .popover ('alternar')	Alterna la ventana emergente de un elemento.	`$('#element').popover('toggle')`
Show - .popover ('mostrar')	Revela el popover de un elemento.	`$('#element').popover('show')`
Hide - .popover ('ocultar')	Oculta la ventana emergente de un elemento.	`$('#element').popover('hide')`
Destroy - .popover ('destruir')	Oculta y destruye el popover de un elemento.	`$('#element').popover('destroy')`

Ejemplo

El siguiente ejemplo demuestra los métodos del complemento popover:

<div class = "container" style = "padding: 100px 50px 10px;" >
   <button type = "button" class = "btn btn-default popover-show" 
      title = "Popover title" data-container = "body" 
      data-toggle = "popover" data-placement = "left" 
      data-content = "Some content in Popover with show method">
      
      Popover on left
   </button>
   
   <button type = "button" class = "btn btn-primary popover-hide" 
      title = "Popover title" data-container = "body" 
      data-toggle = "popover" data-placement = "top" 
      data-content = "Some content in Popover-hide method">
      
      Popover on top
   </button>
   
   <button type = "button" class = "btn btn-success popover-destroy" 
      title = "Popover title" data-container = "body" 
      data-toggle = "popover" data-placement = "bottom" 
      data-content = "Some content in Popover-destroy method">
      
      Popover on bottom
   </button>
   
   <button type = "button" class = "btn btn-warning popover-toggle" 
      title = "Popover title" data-container = "body" 
      data-toggle = "popover" data-placement = "top" 
      data-content = "Some content in Popover-toggle method">
      
      Popover on right
   </button>
	
   <br><br><br><br><br><br>
   
   <p class = "popover-options">
      <a href = "#" type = "button" class = "btn btn-warning" 
         title = "<h2>Title</h2>" data-container = "body" 
         data-toggle = "popover" data-content = "
         <h4>Some content in Popover-options method</h4>">
         
         Popover
      </a>
   </p>
   
   <script>
      $(function () { $('.popover-show').popover('show');});
      $(function () { $('.popover-hide').popover('hide');});
      $(function () { $('.popover-destroy').popover('destroy');});
      $(function () { $('.popover-toggle').popover('toggle');});
      $(function () { $(".popover-options a").popover({html : true });});
   </script>
	
</div>

Eventos

La siguiente tabla enumera los eventos que funcionan con el complemento popover. Este evento puede usarse para conectarse a la función.

Evento	Descripción	Ejemplo
show.bs.popover	Este evento se activa inmediatamente cuando se llama al método show instance.	`$('#mypopover').on('show.bs.popover', function () { // do something })`
show.bs.popover	Este evento se activa cuando el popover se ha hecho visible para el usuario (esperará a que se completen las transiciones CSS).	`$('#mypopover').on('shown.bs.popover', function () { // do something })`
hide.bs.popover	Este evento se dispara inmediatamente cuando se llama al método de la instancia oculta.	`$('#mypopover').on('hide.bs.popover', function () { // do something })`
hidden.bs.popover	Este evento se activa cuando el popover ha terminado de ocultarse al usuario (esperará a que se completen las transiciones CSS).	`$('#mypopover').on('hidden.bs.popover', function () { // do something })`

Ejemplo

El siguiente ejemplo demuestra los eventos del complemento Popover:

<div clas = "container" style = "padding: 100px 50px 10px;" >
   <button type = "button" class = "btn btn-primary popover-show" 
      title = "Popover title" data-container = "body" data-toggle = "popover" 
      data-content = "Some content in Popover with show method">
      
      Popover on left
   </button>
   
</div>

<script>
   $(function () { $('.popover-show').popover('show');});
   
   $(function () { $('.popover-show').on('shown.bs.popover', function () {
      alert("Alert message on show");
   })});
</script>

↰ Previous page Next page ↱