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>