Aplica css a los ‘title’ de tus enlaces.. no seas aburrido!

Hoy he tenido una mañana horrible, todo lo veía feo, todo me descuadraba.. ufff!
Menos mal que he tenido un ratito para relajarme y he dicho.. basta, hora de solucionar cosas.

Mi problema era el siguiente:
“Tengo un formulario con X campos, y hay campos que pido información que no todo el mundo sabe lo que és, por lo tanto he puesto un signo de interrogación (?) al lado. Lo que quiero es: que cuando pase el cursor por encima del interrogante aparezca un mensaje de ayuda al usuario.”

Con el atributo title tengo una solución un tanto chapucera para el problema, a malas podría pasar. Pero me surgen más problemas:
- Es poco llamativo, podría pasar desapercibido para mis usuarios.
- Necesito poner una foto dentro de ese title (un poco complicado eh) ya que con el texto igual no terminan de entenderlo.

Así que cómo casi todo está inventado me he puesto a buscar y buscar por mi amigo Google a ver quién me podía dar una solución, hasta que me he topado con esto: nice titles de 1976desing.

Perfecto, gracias a este script soluciono uno de mis puntos: Aplicar estilo a los title de mis enlaces para que no pasen desapercibidos.
Concretamente la forma de aplicar estilo que utiliza es la siguiente: Elimina el title por defecto de los enlaces, crea un div con una clase (nicetitles) para todos igual y dentro de ese div incluye en un párrafo el texto (obtenido mediante javascript) del atributo enlace sobre el cual pasamos el ratón.

Desde aquí os podeís descargar el código css y el código javascript original de 1976design.

Seguro que a muchos de vosotros os viene bien, sólo tenéis que aplicarle el diseño que queráis, mediante la clase:

.nicetitle {}
.nicetitle p {}

Por cierto, también te muestra el enlace de destino del link, en mi caso, cómo no me interesa mostrarlo lo he quitado. Podéis hacerlo mediante css en un segundo con esto:

.nicetitle p.destination { display:none; }

Pero a lo que iba, me sigue faltando solucionar el tema de la imagen, quiero explicar una cosa y necesito meter una imagen dentro de la explicación para que los usuarios lo entiendan más rápido.

Me voy al archivo javascript, en mi caso lo he llamado titles.js, y busco la función que muestra los divs. Cómo soy más de css que de javascript lo he hecho un poco al tuntún (si a alguien se le ocurre una forma mejor que me lo cuente!). El código en cuestión (dentro de la función showNiceTitle) es el siguiente, cambio:

d.className ='nicetitle';

por:

//si el enlace tiene una clase especifica quiero que se aplique esa clase al div
if (lnk.className == 'gps'){ d.className ='nicetitle gps'; } else
if (lnk.className == 'babyseat'){ d.className ='nicetitle baby-seat'; } else
if (lnk.className == 'booster'){ d.className ='nicetitle booster'; } else { d.className ='nicetitle'; }
//fin del trasteo

Lo que hago es buscar en el documento un enlace con la clase ‘gps’ (aqui tienes que poner la que tengas/quieras) e indicarle que el title de ese enlace tenga una clase específica. Yo lo he hecho con 3 ejemplos, puedes añadir/quitar los que quieras fácilmente, acuerdate de dejar el último else tal cual, así si no le asignamos una clase se le asignará una por defecto.

Y todo esto es para poder poner una imagen de fondo en el css del title de nuestro enlace:

div.gps { background:url(images/gps.jp) no-repeat left #1591c5; padding: 4px 6px 4px 80px;}

Y cómo vale más una imagen que mil palabras.. y yo llevaré más de mil porque mira que me he enrrollado esta vez xD os dejo dos imágenes para que veáis lo que hemos conseguido

titles

9 pensamientos en “Aplica css a los ‘title’ de tus enlaces.. no seas aburrido!

  1. Buenas!

    Muy interesante toda tu web. He encontrado este articulo y he querido implementarlo en mi web.

    Pero me ocurre un problema. Sigo paso a paso la parte de poner la imagen, y no lo consigo. Incluso sin cambiar las clases.

    ¿Puede que este haciendo algo mal?

  2. hey. acabo de ver este post y me ha resultado muy util para levantar mis diseños… pero tengo una duda, no puedo especificar el ancho de mi title, el ancho segun veo está determinado por la url, se muestre o no… existirá un modo de hacer el ancho del elemento dependiente del largo del titulo del link y no de la url de la misma?

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *

Puedes usar las siguientes etiquetas y atributos HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>