Bootstrap Tooltips
En este tutorial aprenderás a crear tooltips con Bootstrap.
- Creación de Tooltips con Bootstrap
- Paso 1: Añadir el marcado Tooltip
- Paso 2: Activación de los tooltips
- Ejemplo
- Configuración de las direcciones de los tooltips
- Posicionamiento de la información sobre herramientas mediante atributos de datos
- Posicionamiento de Tooltips a través de JavaScript
- Opciones
- Métodos
- $().tooltip(opciones)
- .tooltip(‘show’)
- Ejemplo
- .tooltip(‘hide’)
- Ejemplo
- .tooltip(‘toggle’)
- Ejemplo
- .tooltip(‘dispose’)
- .tooltip(‘enable’)
- Ejemplo
- .tooltip(‘disable’)
- .tooltip(‘toggleEnabled’)
- .tooltip(‘update’)
- Ejemplo
- Eventos
Creación de Tooltips con Bootstrap
Un tooltip es una pequeña ventana emergente que aparece cuando el usuario coloca el puntero del ratón sobre un elemento como un enlace o botones para proporcionar una pista o información sobre el elemento sobre el que se pasa.
Los tooltip pueden ser muy útiles para los nuevos visitantes de su sitio web porque permiten al usuario conocer el propósito de los iconos y enlaces al situar el puntero del ratón sobre ellos.
Paso 1: Añadir el marcado Tooltip
Para crear un tooltip, es necesario añadir el atributo data-toggle="tooltip" a un elemento. El texto de la información de peaje que se mostraría al pasar por encima puede especificarse utilizando el atributo title.
Aquí está el marcado estándar para añadir una información de peaje a un hipervínculo.
De forma similar, puedes añadir tooltips a los demás elementos como botones, iconos, etc.
Nota: Por razones de rendimiento los data-apis de los tooltips son opcionales, significa que para usar los tooltips debe inicializarlos usted mismo con el método tooltip().
Paso 2: Activación de los tooltips
Los tooltips se pueden activar a través de JavaScript – simplemente llame al método tooltip() de Bootstrap con el selector id, class o cualquier selector CSS del elemento de destino en su código JavaScript.
Puede inicializar los tooltips individualmente o todos en una sola vez. El siguiente código jQuery inicializará todos los tooltips de una página seleccionándolos por su atributo data-toggle.
Ejemplo
Pruebe este código »
<script>$(document).ready(function(){ $('').tooltip(); });</script>– La salida del ejemplo anterior se verá algo así:
Configuración de las direcciones de los tooltips
Puedes configurar los tooltips para que aparezcan en la parte superior, derecha, inferior e izquierda de un elemento.
Posicionamiento de la información sobre herramientas mediante atributos de datos
El siguiente ejemplo le mostrará cómo establecer la dirección de la información sobre herramientas mediante atributos de datos.
Posicionamiento de Tooltips a través de JavaScript
El siguiente ejemplo le mostrará cómo establecer la dirección de los tooltips a través de JavaScript.
Opciones
Hay ciertas opciones que pueden ser pasadas al método tooltip() Bootstrap para personalizar la funcionalidad del plugin de tooltip.
| Nombre | Tipo | Valor por defecto | Descripción |
|---|---|---|---|
| animación | boolean | true | Aplicar una transición de desvanecimiento CSS al tooltip. |
| html | boolean | false | Inserta html en el tooltip. Si es falso, se utilizará el método text() de jQuery para insertar contenido en el DOM. Utilice texto si le preocupan los ataques XSS. |
| placement | string | function | ‘top’ | Establece la posición del tooltip – top | bottom | left | right | auto. Cuando se especifica el valor «auto», se reorientará dinámicamente el tooltip. |
| selector | string | false | Si se proporciona un selector, los objetos tooltip se adjuntarán a los objetivos especificados. |
| title | string | function | » | Establece el valor por defecto title si el atributo title no está presente. |
| trigger | string | ‘hover focus’ | Especifica cómo se activa el tooltip – click | hover | focus | manual. Tenga en cuenta que puede pasar varios tipos de activación, separados por espacios. |
| retraso | número | objeto | 0 |
Tiempo de retraso en mostrar y ocultar la información sobre herramientas (ms) – no se aplica al tipo de activación manual. Si se suministra un número, el retardo se aplica tanto a ocultar/mostrar La estructura del objeto es: |
| contenedor | cadena | false | false | Aplica el tooltip a un elemento específico. container: 'body' |
| template | string |
|
Base HTML a utilizar al crear la información sobre herramientas. El título del tooltip se insertará en el elemento que tiene la clase El elemento envolvente más externo debe tener la clase |
| viewport | string | object | { selector: 'body', padding: 0 } |
|
| offset | número | cadena | 0 | Desplazamiento de la información sobre herramientas en relación con su objetivo. |
| fallbackPlacement | string | array | ‘flip’ | Permite especificar qué posición utilizará Popper en el fallback. |
| límite | string | element | ‘scrollParent’ | Límite de restricción del tooltip. Acepta los valores de 'viewport', 'window', 'scrollParent', o una referencia HTMLElement (sólo en JavaScript). |
| sanitize | boolean | true | Activa o desactiva la sanitización. Si se activa las opciones ‘template’ y ‘title’ serán sanitizadas. |
| whiteList | object | value | Objeto que contiene atributos y etiquetas permitidos. |
| sanitizeFn | null | function | null | Le permite especificar su propia función de sanitización. |
Puede establecer estas opciones mediante el uso de atributos de datos o JavaScript. Para establecer las opciones de información sobre herramientas a través de atributos de datos, sólo tiene que añadir el nombre de la opción a data- junto con el valor correcto, como data-animation="false", data-placement="bottom" etc.
Sin embargo, JavaScript es la forma más preferible para establecer estas opciones, ya que le evita el trabajo repetitivo. Vea el método $().tooltip(options) de tooltip en la sección siguiente para saber cómo establecer las opciones de tooltips utilizando el JavaScript.
Métodos
Estos son los métodos estándar de tooltip de Bootstrap:
$().tooltip(opciones)
Este método adjunta el manejador de tooltip a un grupo de elementos. También permite establecer las opciones de los tooltips, para que puedas personalizarlos según tus necesidades.
El siguiente ejemplo insertará el texto especificado dentro de la información sobre herramientas si el valor del atributo title se omite o falta en los elementos seleccionados:
El siguiente ejemplo le mostrará cómo colocar el contenido HTML dentro de una información sobre herramientas:
El siguiente ejemplo le mostrará cómo controlar el momento de mostrar y ocultar la información sobre herramientas utilizando la opción delay de la información sobre herramientas mediante JavaScript.
El siguiente ejemplo le mostrará cómo puede crear su propia plantilla personalizada para los tooltips de Bootstrap en lugar de utilizar la predeterminada.
El siguiente ejemplo insertará el código HTML generado dinámicamente del tooltip al final de un elemento .wrapper en lugar del elemento <body>.
Nota: Anular el valor de la opción container por defecto de la información sobre herramientas no produce ninguna diferencia visible en la página. Para ver el resultado real es necesario inspeccionar el DOM resultante utilizando las herramientas Firebug o Developer.
Del mismo modo, puede establecer otras opciones para la información sobre herramientas utilizando el método $().tooltip(options). Vamos a ver los otros métodos del plugin tooltip de Bootstrap.
.tooltip(‘show’)
Este método revela el tooltip de un elemento.
Ejemplo
Prueba este código »
<script>$(document).ready(function(){ $(".show-tooltip").click(function(){ $("#myTooltip").tooltip('show'); }); });</script>.tooltip(‘hide’)
Este método oculta la información sobre herramientas de un elemento.
Ejemplo
Prueba este código »
<script>$(document).ready(function(){ $(".hide-tooltip").click(function(){ $("#myTooltip").tooltip('hide'); }); });</script>.tooltip(‘toggle’)
Este método activa la información sobre herramientas de un elemento.
Ejemplo
Prueba este código »
<script>$(document).ready(function(){ $(".toggle-tooltip").click(function(){ $("#myTooltip").tooltip('toggle'); }); });</script>.tooltip(‘dispose’)
Este método oculta y destruye la información sobre herramientas de un elemento.
.tooltip(‘enable’)
Este método permite mostrar la información sobre herramientas de un elemento. La información sobre herramientas está activada por defecto.
Ejemplo
Pruebe este código »
<script>$(document).ready(function(){ $(".enable-tooltip").click(function(){ $("#myTooltip").tooltip('enable'); }); });</script>.tooltip(‘disable’)
Este método elimina la capacidad de mostrar la información sobre herramientas de un elemento. La información sobre herramientas sólo podrá mostrarse si se vuelve a habilitar.
.tooltip(‘toggleEnabled’)
Este método alterna la capacidad de mostrar u ocultar la información sobre herramientas de un elemento.
.tooltip(‘update’)
Este método actualiza la posición del tooltip de un elemento.
Ejemplo
Pruebe este código »
<script>$(document).ready(function(){ $(".update-tooltip").click(function(){ $("#myTooltip").tooltip('update'); }); });</script>Eventos
La clase tooltip de Bootstrap incluye algunos eventos para engancharse a la funcionalidad del tooltip.
| Evento | Descripción |
|---|---|
| show.bs.tooltip | Este evento se dispara inmediatamente cuando se llama al método de instancia show. |
| shown.bs.tooltip | Este evento se dispara cuando el tooltip se ha hecho visible para el usuario. Esperará hasta que el proceso de transición CSS se haya completado por completo antes de dispararse. |
| hide.bs.tooltip | Este evento se dispara inmediatamente cuando se ha llamado al método de instancia hide. |
| hidden.bs.tooltip | Este evento se dispara cuando la información sobre herramientas ha terminado de ocultarse al usuario. Esperará hasta que el proceso de transición de CSS se haya completado totalmente antes de ser disparado. |
| inserted.bs.tooltip | Este evento se dispara después del evento show.bs.tooltip cuando la plantilla tooltip ha sido añadida al DOM. |
El siguiente ejemplo mostrará un mensaje de alerta al usuario cuando la transición de desvanecimiento de la información sobre herramientas se haya completado totalmente.