Como ya sabes, un tooltip es texto descriptivo que va asociado a un elemento determinado de página web, por ejemplo campos de un formulario, imágenes, botones, etc. Pero gracias a Boostrap también es posible añadir un tooltip a cualquier font ícon o fuente de íconos.
Para este ejemplo vamos a asociar un tootip con un ícono de Fontawesome.
Primero creamos el contenido HTML:
<div class="mt-5 ml-4" >
<a href="#"><i class="fas fa-cloud-download-alt" data-toggle="tooltip"
data-original-title="Descargar"></i></a>
<a href="#"><i class="fas fa-upload" data-toggle="tooltip" data-original-title="Subir"></i></a>
<a href="#"><i class="fas fa-sign-in-alt" data-toggle="tooltip"
data-original-title="Registrarse"></i></a>
<a href="#"><i class="fas fa-redo-alt" data-toggle="tooltip"
data-original-title="Refrescar"></i></a>
<a href="#"><i class="fas fa-cog" data-toggle="tooltip" data-original-title="Configuración"></i></a>
<p class="mt-4"><b>Nota:</b> Coloca el puntero del ratón por encima de cada ícono para ver su tooltip.</p>
</div>
Tal y como puedes ver, hemos encerrado cada elemento <i> (que son los que emplea Fontawesome para mostrar sus íconos) dentro de un elemento <a>. Obviamente esto es opcional y lo hacemos en caso de que quisieramos vincular los íconos con cualquier otro elemento, página o recurso.
También hemos añadido los atributos data-toggle=»tooltip» y data-original-title a cada elemento <i>.
Para activar los tooltips vamos a utilizaremos el método .tooltip() de Boostrap:
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip({
placement : 'top'
});
});
El atributo placement con el valor top permite que al pasar el puntero del ratón por encima del ícono el tooltip se muestre en la parte superior del mismo.
Código completo:
See the Pen Cómo agregar etiquetas tooltip de Boostrap a un ícono by simplicitytree (@simplicitytree) on CodePen.
Inicialmente me formé como Técnico en Anális y Diseño de sistemas. Luego ingresé a la escuela de negocios, hice una licenciatura en Administración y obtuve una especialización (Post-grado) en Alta Dirección Empresarial. Desde el año 2007 me dedico a la creación de sitios web, lo cual combino con la consultoría y la capacitación de tecnologías de Internet.
- TypeScript vs. JavaScript: ¿Cuál es mejor para tus proyectos? - octubre 31, 2024
- Optimización de imágenes: clave para un diseño web eficiente - septiembre 28, 2024
- Objetos en JavaScript - septiembre 21, 2024