• iborra
    borde slide
    DESCUBRE A TRAVÉS DE
    borde slide
    NUESTRO BLOG
    Artículos de interés sobre diseño web

Diferentes estilos de Tooltips para tu inspiración

tooltip

Un tooltip es una herramienta de ayuda visual, que funciona al situar el cursor sobre algún elemento gráfico o texto, mostrando una ayuda adicional para informar al usuario de la finalidad del elemento sobre el que se encuentra.

Los tooltips son una variación de los globos de ayuda y es un complemento muy usado en programación y diseño, dado que proporcionan información adicional sin necesidad de que el usuario la solicite de forma activa.

En este tutorial vamos a explicar cómo realizar varios tooltips utilizando sólamente CSS y que podréis personalizar a vuestro gusto. Estos tooltips sólo funcionan en navegadores modernos y actualizados en sus últimas versiones.

Los tooltips que vamos a aprender hacer no son responsive, es decir, no se ajustan a dispositivos móviles. Para ello necesitaríamos utilizar JavaScript para que el tooltip no aparezca fuera de la pantalla. Algunas soluciones útiles son las siguientes: Tipped, jQuery UI Tooltip, CSS Tooltips built on Tether, jQuery Tooltipsy, jQuery PowerTip y Opentip.

A continuación os pongo unos ejemplos de tooltips que se muestran al pasar el cursor por encima. Estos son los que veremos en este tutorial:



TOOLTIP BOX


Esto es un ejemplo de TOOLTIP BOXUn Tooltip es una herramienta de ayuda visual, que funciona al situar el cursor sobre algún elemento gráfico, mostrando una ayuda adicional para informar al usuario de la finalidad del elemento sobre el que se encuentra.
Iborra Web Design
y con un enlace en el interior de la caja.



TOOLTIP CLASSIC


Mostrando Tooltip Classic con Efecto 1Un Tooltip es una herramienta de ayuda visual, que funciona al situar el cursor sobre algún elemento gráfico, mostrando una ayuda adicional para informar al usuario de la finalidad del elemento sobre el que se encuentra.
Iborra Web Design
- Efecto 2Un Tooltip es una herramienta de ayuda visual, que funciona al situar el cursor sobre algún elemento gráfico, mostrando una ayuda adicional para informar al usuario de la finalidad del elemento sobre el que se encuentra.
Iborra Web Design
- Efecto 3Un Tooltip es una herramienta de ayuda visual, que funciona al situar el cursor sobre algún elemento gráfico, mostrando una ayuda adicional para informar al usuario de la finalidad del elemento sobre el que se encuentra.
Iborra Web Design
- Efecto 4Un Tooltip es una herramienta de ayuda visual, que funciona al situar el cursor sobre algún elemento gráfico, mostrando una ayuda adicional para informar al usuario de la finalidad del elemento sobre el que se encuentra.
Iborra Web Design
y Efecto 5Un Tooltip es una herramienta de ayuda visual, que funciona al situar el cursor sobre algún elemento gráfico, mostrando una ayuda adicional para informar al usuario de la finalidad del elemento sobre el que se encuentra.
Iborra Web Design
.



TOOLTIP COMIC


tooltipcomic

Efecto 1

¡Hola! Soy un Tooltip dentro de un diálogo de comic.
tooltipcomic

Efecto 2

¡Hola! Soy un Tooltip dentro de un diálogo de comic.



TOOLTIP CURVED


Soy un Tooltip idóneo para poner en un mapa.
Soy un Tooltip idóneo para poner en un mapa.




TOOLTIP SHARP


Esto es un ejemplo de Tooltip Sharp a la izquierdaSoy un Tooltip muy elegante situado en el lado izquierdo. y a la derechaSoy un Tooltip muy elegante situado en el lado derecho..


Para realizar estos tooltips, primero descargamos los archivos, el enlace se encuentra más abajo. Dentro del archivo descargado encontramos cuatro carpetas. Abrimos la carpeta css que contiene dentro los estilos de todos los tooltips por separado. Copiamos el archivo que vayamos a utilizar y lo pegamos dentro del archivo principal css de nuestro tema o simplemente copiamos y pegamos este archivo dentro de la carpeta css de nuestro tema o plantilla. Luego hay que indicar en la página donde ponemos el tooltip un enlace a este archivo en la parte de arriba dentro de la etiqueta <head>. Por ejemplo de la siguiente manera.

<link rel="stylesheet" href="css/nombre-archivo-principal.css">

o

<link rel="stylesheet" href="css/tooltip-styles/tooltip-sharp.css">

Ahora abrimos la carpeta fonts y copiamos y pegamos todas las fuentes en nuestra carpeta de fuentes. Hacemos lo mismo con el archivo css de fuentes y lo enlazamos, como hemos hecho anteriormente, dentro de la etiqueta <head>. También abrimos la carpeta images y copiamos y pegamos todas las imágenes a nuestra carpeta donde tenemos alojadas el resto de imágenes de nuestro sitio web.

Dentro de la carpeta demo encontramos el código HTML de todos los tooltips. Copiamos el que nos interese y lo pegamos en la página donde vayamos a poner el tooltip. Por ejemplo, si vamos a poner el Tooltip Sharp, tendremos que poner el siguiente código.

<div class="dummy">
<p>Esto es un ejemplo de Tooltip Sharp a la <span class="tooltipsharp tooltipsharp-turnright"><span class="tooltipsharp-item">izquierda</span><span class="tooltipsharp-content">Soy un <span style="color:#ec9b1b">Tooltip</span> muy elegante situado en el lado izquierdo.</span></span> y a la <span class="tooltipsharp tooltipsharp-turnleft"><span class="tooltipsharp-item">derecha</span><span class="tooltipsharp-content">Soy un <span style="color:#ec9b1b">Tooltip</span> muy elegante situado en el lado derecho.</span></span>.</p>
</div>

Como veis, es bastante sencillo de aplicar estos tooltips. A través de la hoja de estilos css podéis personalizarlos como queráis. Para hacerlos responsive utilizar JavaScript o hacerlo manualmente a través de media queries.

A continuación os dejo el enlace de descarga con todos los archivos. Espero que os sea útil este tutorial.

ENLACE DE DESCARGA
Estilos de Tooltips (Iborra Web Design)

CONTRASEÑA DEL ARCHIVO
iborra.es

Comenta y comparte este post!

¿Tienes alguna sugerencia, idea, consejo, duda, pregunta, agradecimiento, encuentras algún error o este post no está actualizado? Entonces esperamos tu comentario.

También puedes recomendar y compartir este post. Estamos muy agradecidos por tu apoyo!

Comentarios (0)

No hay Comentarios todavía en este post. Podrías ser el primero!

Deja un comentario

Este blog se nutre de los comentarios de los visitantes! Así que vamos, únete a nosotros!

Por favor esperamos que entiendas que se eliminarán aquellos comentarios que no tengan nada que ver con el contenido de este post o siempre que se utilicen palabras ofensivas.

COMENTARIO PARA ESTE POST

Imagen mínimo: 300x300 - Formato: jpg o png - Tamaño máximo: 10Mb

CAPTCHA code