Bootstrap: complemento de información sobre herramientas

La información sobre herramientas es útil cuando necesita describir un enlace. El complemento se inspiró en el complemento jQuery.tipsy escrito por Jason Frame . Desde entonces, la información sobre herramientas se ha actualizado para que funcione sin imágenes, animada con una animación CSS y atributos de datos para el almacenamiento local de títulos.

Si desea incluir esta funcionalidad de complemento individualmente, necesitará tooltip.js. De lo contrario, como se menciona en el capítulo Descripción general de los complementos de Bootstrap , puede incluir bootstrap.js o el bootstrap.min.js minificado .

Uso

El complemento de información sobre herramientas genera contenido y marcado a pedido y, de forma predeterminada, coloca la información sobre herramientas después de su elemento de activación. Puede agregar información sobre herramientas de las dos formas siguientes:

Via data attributes - Para agregar una información sobre herramientas, agregue data-toggle = "tooltip"a una etiqueta de anclaje. El título del ancla será el texto de una información sobre herramientas. De forma predeterminada, el complemento establece la información sobre herramientas en la parte superior.

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

Via JavaScript - Activar la información sobre herramientas a través de JavaScript -

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

El complemento de información sobre herramientas NO es solo complementos de 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 toda la información sobre herramientas en su página, simplemente use este script:
$(function () { $("[data-toggle = 'tooltip']").tooltip(); });

Ejemplo

El siguiente ejemplo demuestra el uso del complemento de información sobre herramientas a través de atributos de datos.

<h4>Tooltip examples for anchors</h4>

This is a <a href = "#" class = "tooltip-test" data-toggle = "tooltip" 
   title = "Tooltip on left"> Default Tooltip</a>.

This is a <a href = "#" class = "tooltip-test" data-toggle = "tooltip" 
   data-placement = "left" title = "Tooltip on left">Tooltip on Left</a>.

This is a <a href = "#" data-toggle = "tooltip" data-placement = "top" 
   title = "Tooltip on top">Tooltip on Top</a>.

This is a <a href = "#" data-toggle = "tooltip" data-placement = "bottom"
   title = "Tooltip on bottom">Tooltip on Bottom</a>.

This is a <a href = "#" data-toggle = "tooltip" data-placement = "right" 
   title = "Tooltip on right">Tooltip on Right</a>
	
<br>

<h4>Tooltip examples for buttons</h4>

<button type = "button" class = "btn btn-default" data-toggle = "tooltip" title = "Tooltip on left">
   Default Tooltip
</button>

<button type = "button" class = "btn btn-default" data-toggle = "tooltip" 
   data-placement = "left" title = "Tooltip on left">
	
   Tooltip on left
</button>

<button type = "button" class = "btn btn-default" data-toggle = "tooltip" 
   data-placement = "top" title = "Tooltip on top">
   
   Tooltip on top
</button>

<button type = "button" class = "btn btn-default" data-toggle = "tooltip" 
   data-placement = "bottom" title = "Tooltip on bottom">
   
   Tooltip on bottom
</button>

<button type = " button" class = " btn btn-default" data-toggle = "tooltip" 
   data-placement = "right" title = "Tooltip on right">
   
   Tooltip on right
</button>

<script>
   $(function () { $("[data-toggle = 'tooltip']").tooltip(); });
</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 información sobre herramientas.
html	booleano Predeterminado: falso	datos-html	Inserta HTML en la información sobre herramientas. 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: superior	colocación de datos	Especifica cómo colocar la información sobre herramientas (es decir, arriba \| abajo \| izquierda \| derecha \| automático). Cuando se especifica auto , reorientará dinámicamente la información sobre herramientas. Por ejemplo, si la ubicación es "izquierda automática", la información sobre herramientas 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 de información sobre herramientas se delegarán a los destinos especificados.
título	cadena \| función Predeterminado: "	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	cadena Por defecto: 'hover focus'	disparador de datos	Define cómo se activa la información sobre herramientas: click\| hover \| focus \| manual. Puede pasar varios factores desencadenantes; sepárelos con un espacio.
contenido	cadena \| función Por defecto: ''	contenido de datos	Valor de contenido predeterminado si el atributo de contenido de datos no está presente
retrasar	numero \| objeto Por defecto: 0	retraso de datos	Retrasos para mostrar y ocultar la información sobre herramientas 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 la información sobre herramientas a un elemento específico. Ejemplo: contenedor: 'cuerpo'

Métodos

Los siguientes son algunos métodos útiles para la información sobre herramientas:

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

Ejemplo

El siguiente ejemplo demuestra el uso del complemento de información sobre herramientas a través de atributos de datos.

<div style = "padding: 100px 100px 10px;">
   This is a <a href = "#" class = "tooltip-show" data-toggle = "tooltip" 
      title = "show">Tooltip on method show</a>.

   This is a <a href = "#" class = "tooltip-hide" data-toggle = "tooltip" 
      data-placement = "left" title = "hide">Tooltip on method hide</a>.

   This is a <a href = "#" class = "tooltip-destroy" data-toggle = "tooltip" 
      data-placement = "top" title = "destroy">Tooltip on method destroy</a>.

   This is a <a href = "#" class = "tooltip-toggle" data-toggle = "tooltip" 
      data-placement = "bottom" title = "toggle">Tooltip on method toggle</a>.
   
   <br><br><br><br><br><br>
   
   <p class = "tooltip-options" >
      This is a <a href = "#" data-toggle = "tooltip" title = "<h2>'am Header2
         </h2>">Tooltip on method options</a>.
   </p>

   <script>
      $(function () { $('.tooltip-show').tooltip('show');});
      $(function () { $('.tooltip-hide').tooltip('hide');});
      $(function () { $('.tooltip-destroy').tooltip('destroy');});
      $(function () { $('.tooltip-toggle').tooltip('toggle');});
      $(function () { $(".tooltip-options a").tooltip({html : true });});
   </script>
</div>

Eventos

La siguiente tabla enumera los eventos para trabajar con el complemento de información sobre herramientas. Este evento puede usarse para conectarse a la función.

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

Ejemplo

El siguiente ejemplo demuestra el uso del complemento de información sobre herramientas a través de atributos de datos.

<h4>Tooltip examples for anchors</h4>

This is a <a href = "#" class = "tooltip-show" data-toggle = "tooltip" 
   title = "Default Tooltip">Default Tooltip</a>.

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