El uso del tooltip en los los enlaces y un sencillo ejemplo de Tooltip personalizado
El otro día me encontré un truquillo muy bueno, idea de kollermedia, que consiste en crear tooltips personalizados en los enlaces, y me parece muy fácil de aplicar, muy ligero (sin ningún script pesado) e inspirador.
Un tooltip, también llamado descripción emergente, es el texto que puede ser visible al poner el puntero del ratón encima de un enlace, y que nosotros agregamos a éste, escribiéndolo dentro de un atributo llamado title , y que colocamos en el código que corresponde a un enlace; si se fijaron, yo misma lo he hecho en los enlaces anteriores.
El tooltip, se utiliza para poner información adicional de un enlace, (aunque también puede ser usado en las imágenes), por ejemplo, si tuviéramos en una entrada un enlace externo a Wikipedia, podríamos poner un tooltip en este que dijiera: -"Ver más información en la página de Wikipedia"- de ese modo, el usuario podrá leer en el tooltip que si hace click sobre ese enlace, irá a la página de Wikipedia, y no habrá sorpresas para el usuario ya que sabrá a donde lo lleva ese enlace, ¿que útil es verdad?.
Bueno, pues tendremos que trabajar mucho al respecto, y empezar a darle más uso, para hacer de nuestro sitio un lugar más accesible :). Pueden ver información interesante sobre El atributo title en los enlaces y saber más sobre los beneficios de su uso, en la página del Sr. Fran Tarifa.
¿Cómo poner un tooltip en un enlace?
Ejemplo:
Para que aparezca el tooltip, necesitamos usar el atributo title, como lo habíamos mencionado antes, dentro del código del enlace, y se puede conseguir fácilmente desde el editor de Blogger, después de haber creado nuestro enlace usado la herramienta de Enlace, y luego vamos a la Edición de HTML de la entrada, y lo agregamos de la siguiente forma:
<a href="Mi enlace" title="Yo soy la descripción emergente o tooltip">Hola, soy un enlace</a>
El resultado lo puedes ver ahora, al poner el puntero del ratón sobre el siguiente enlace:
Hola, soy un enlace
¿Vieron el texto que apareció en ese rectangulito gris?, así es como aparece en todos los navegadores.
Además de lo bueno que resulta usar un tooltip, ya que le da información adicional al usuario sobre un enlace, y pensando en fines más estéticos y en la idea de Kollermedia que les mencionaba, es posible crear la misma función del tooltip, solo que ahora podemos darle los estilos que queramos con CSS para personalizarlo a nuestro gusto.
Para lograrlo necesitamos utilizar este código CSS:
a:hover { /*para que funcione en IE6*/
background:#ffffff; /* el color de fondo del enlace*/
text-decoration: none;
}
a.tooltip span {
display:none;
padding:2px 3px;
margin-left:8px;
width:130px; /*el ancho del tooltip*/
}
a.tooltip:hover span {
display: inline;
position: absolute; /* posición del tooltip necesaria y obligatoria*/
background: #ddeaf6 ; /*el color del fondo del tooltip*/
border: 1px solid #c6dcf0; /*el color del borde y su estilo*/
color: #353536; /*el color de la letra del tooltip*/
font-size: 12px; /*el tamaño de la letra*/
line-height: 120%; /*la separación entre lineas*/
}
Nota: he agregado las propiedades para definir el tamaño de la letra, y la separación entre lineas.
Y para ponerlo en acción, esta linea de código HTML
<a class="tooltip" href="La_URL_de_mi_enlace">Yo soy un enlace<span>Yo soy el texto del tooltip creado con una clase y he sido personalizado</span></a>
EN Texto emergente que se verá al poner el puntero sobre el enlace
EN El texto del enlace
EN La clase que en este caso se llama tooltip, pensando en que tenga un nombre en base a su función
Y este es el resultado:
Como usamos CSS, para crear los estilos del tooltip, podemos darle la apariencia que queramos cambiando el color del fondo, usando bordes, etc. etc., según nuestro gusto y necesidad. Esto puede ser muy interesante si lo usáramos en algún menú, o en los iconos de redes sociales por ejemplo.
¿Te gusta?
Siéntete libre de comentar tus inquietudes y/o sugerencias :)
Bueno, me voy porque tengo que ponerle tooltips a mis enlaces, para hacer mi sitio más accesible ;)
Hasta la próxima.
Etiquetas:CSS,trucos,Tutoriales