Los tooltips son componentes de interfaz de usuario que muestran información contextual al interactuar con elementos HTML, como al pasar el ratón o hacer clic.

Atributos principales

Los tooltips se configuran mediante atributos HTML personalizados de Bootstrap 4:

Ejemplo básico de inicialización

Para activar tooltips, se necesita inicializarlos con JavaScript:

<a href="#" class="enlace-info" title="Información adicional" data-placement="top" data-trigger="hover">Pasa el ratón aquí</a>

<script>
$(document).ready(function(){
    $('.enlace-info').tooltip();
});
</script>

Tooltips con contenido HTML

Se puede habilitar soporte para HTML estableciendo data-html="true":

<button class="btn-ayuda" title="<strong>Título</strong><p>Descripción detallada.</p>" data-html="true" data-trigger="click">Ayuda</button>

<script>
$(document).ready(function(){
    $('.btn-ayuda').tooltip();
});
</script>

Configuración avanzada con opciones JavaScript

Los tooltips se pueden personalizar mediante un objeto de opcionse:

$('.mi-elemento').tooltip({
    contenido: 'Texto alternativo',
    posicion: 'right',
    formatoHtml: false,
    animar: true,
    retraso: { mostrar: 200, ocultar: 100 },
    activador: 'hover',
    contenedor: 'body',
    plantilla: '<div class="tooltip-custom"><div class="flecha"></div><div class="contenido"></div></div>'
});

Uso de selectores para delegación

Los tooltips se pueden aplicar dinámicamente a elementos dentro de un contenedor:

<div class="contenedor-dinamico">
    <a href="#" class="item" title="Primer item">Item 1</a>
    <a href="#" class="item" title="Segundo item">Item 2</a>
</div>

<script>
$('.contenedor-dinamico').tooltip({
    selector: '.item',
    activador: 'focus'
});
</script>

Personalización de estilos

Se puede modificar la apariencia del tooltip mediante plantillas y CSS:

<style>
.tooltip-personalizada .flecha::before {
    border-color: #3498db;
}
.tooltip-personalizada .contenido {
    background-color: #3498db;
    color: white;
    padding: 5px;
}
</style>

<a href="#" class="enlace-estilizado" title="Tooltip con estilo">Enlace</a>

<script>
$('.enlace-estilizado').tooltip({
    plantilla: '<div class="tooltip-personalizada"><div class="flecha"></div><div class="contenido"></div></div>'
});
</script>

Métodos programáticos

Bootstrap 4 proporciona métodos para controlar los tooltips:

// Mostrar tooltip
$('.elemento').tooltip('show');

// Ocultar tooltip después de un retraso
setTimeout(function(){
    $('.elemento').tooltip('hide');
}, 3000);

// Alternar visibilidad
$('#boton-toggle').on('click', function(){
    $('#tooltip-asociado').tooltip('toggle');
});

Eventos

Los tooltips disparan eventos durante su ciclo de vida: