Bootstrap JS Tooltip

JS Tooltip

La información sobre tooltip es un pequeño cuadro emergente que aparece cuando el usuario mueve el puntero del mouse sobre un elemento.

Atributos vía data-*

data-toggle=»tooltip» activa la información sobre herramientas (tooltip).

El atributo title especifica el texto que debe mostrarse dentro de la información sobre herramientas.

Ejm

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

Vía Javascript

La información sobre tooltip no son complementos solo de CSS y, por lo tanto, deben inicializarse con jQuery: selecciona el elemento especificado y llama al método tooltip().

Ejm

// Select all elements with data-toggle="tooltips" in the document
$('[data-toggle="tooltip"]').tooltip(); 

// Select a specified element
$('#myTooltip').tooltip();

Opciones tooltip

Las opciones se pueden pasar a través de atributos de datos o JavaScript. Para los atributos de datos, agrega el nombre de la opción a data-, como en data-position = «».

Nombre Tipo Por defecto Descripción
animation boolean true Especifica si se debe agregar un efecto de transición de desvanecimiento CSS al mostrar y ocultar la información sobre herramientas

true: agrega un efecto de desvanecimiento
false: no agregue un efecto de desvanecimiento
container string, boolean false Añade la información sobre herramientas a un elemento específico.
Ejemplo: container: ‘body’
delay number, object 0 Especifica el número de milisegundos que se necesitará para mostrar y ocultar la información sobre herramientas.

Para especificar un retraso para mostrar y otro para ocultar, use la estructura del objeto:

delay: {show: 500, hide: 100}, que tardará 500 ms en mostrar la información sobre tooltip, pero solo 100 ms para ocultarlo
html boolean false Especifica si se aceptan etiquetas HTML en la información sobre herramientas:

true: acepta etiquetas HTML
falso: no acepte etiquetas HTML

Nota: El HTML debe insertarse en el atributo de título (o utilizando la opción de título).

Cuando se establece en falso (predeterminado), se usará el método text () de jQuery. Use esto si le preocupan los ataques XSS
placement string «top» Especifica la posición de la información sobre herramientas. Valores posibles:

«top» – Información sobre herramientas en la parte superior
«bottom» – Información sobre herramientas en la parte inferior
«left» – Información sobre herramientas a la izquierda
«right» – Información sobre herramientas a la derecha
«auto»: permite al navegador decidir la posición de la información sobre herramientas. Por ejemplo, si el valor es «auto izquierda», la información sobre herramientas se mostrará en el lado izquierdo cuando sea posible, de lo contrario a la derecha. Si el valor es «fondo automático», la información sobre herramientas se mostrará en la parte inferior cuando sea posible, de lo contrario en la parte superior
selector string, boolean false Agrega la información sobre tooltip a un selector especificado
template string HTML base para usar al crear la información sobre herramientas.

El título de la información sobre herramientas se insertará en el elemento que tenga la clase .tooltip-inner y el elemento con la clase .tooltip-arrow se convertirá en la flecha de la información sobre herramientas.

El elemento envoltorio más externo debe tener la clase .tooltip
titlte string «» Especifica el texto que se debe mostrar dentro de la información sobre tooltip
trigger string «hover focus» Especifica cómo se activa la información sobre herramientas. Valores posibles:

«clic»: activa la información sobre herramientas con un clic
«hover»: activa la información sobre herramientas al pasar el mouse por encima
«focus»: desencadena la información sobre herramientas cuando obtiene el foco (tabulando o haciendo clic en .e.g)
«manual»: activa la información sobre herramientas manualmente

Consejo: para pasar varios valores, sepárelos con un espacio
offset number, string 0 Desplazamiento de la información sobre herramientas en relación con su objetivo
fallbackPlacement string, array «flip» Especifica qué posición utilizará Popper en la reserva
boundary string, element «scrollParent» Límite de restricción de desbordamiento de la información sobre herramientas. Acepta los valores «viewport», «window» o «scrollParent», o un elemento HTML

Métodos tooltip

La siguiente tabla muestra todos los métodos tooltip

Método Descripción
.tooltip(opciones) Activa la información sobre herramientas con una opción. Ver opciones anteriores para valores válidos
.tooltip(«show») Muestra el tooltip
.tooltip(«hide») Oculta el tooltip
.tooltip(«toggle») Alterna el tooltip
.tooltip(«dispose») Oculta y destruye el tooltip

Eventos tooltip

La siguiente tabla muestra todos los eventos tooltip

Evento Descripción
show.bs.tooltip Se produce cuando el tooltip está a punto de mostrarse
shown.bs.tooltip Se produce cuando la información sobre herramientas se muestra completamente (después de que se hayan completado las transiciones CSS)
hide.bs.tooltip Se produce cuando el tooltip está a punto de ocultarse
hidden.bs.tooltip Se produce cuando la información sobre herramientas está completamente oculta (después de que se hayan completado las transiciones CSS)