Crea y personaliza un Tooltip (Title) para los enlaces [1]

domingo, 27 de diciembre de 2009
Si quieres que al poner el cursor sobre un enlace,  aparezca un pequeño Título o Title encima de este (que no es más que un cuadrito pequeño con una pequeña descripción) , este truco te permitirá crear y decorar los mismos fácilmente.
Si aún no sabes lo que es un Tooltip, coloca el cursor encima del siguiente texto:


Para agregarlo sólo debes seguir los siguientes pasos:

1.  Nos dirigimos a Diseño>Edición de HTML y Expandimos Artilugios

2. Añadimos antes de ]]></b:skin> el siguiente código:
a.tooltip{
position: relative;
z-index: 24;
color: #0080FF;
text-decoration: none;
}

a.tooltip:hover{
z-index: 24;
color: #002AFE;
text-decoration: none;
}

a.tooltip:visited{
text-decoration: none;
color:#08088A;
}

a.tooltip:active{
z-index: 24;
color: #0000FF;
text-decoration: none;
}

a.tooltip span{ display: none;
}

a.tooltip:hover span{
border: 2px solid #088A08;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
display: block;
position: absolute;
top: 2.5em;
left: 3em;
width: 10em;
background-color: #74DF00;
color: #0B0B0B;
font-size: 8pt;
font-family: Comic Sans MS;
text-align: left;
padding-left: 2px ;
padding-right: 2px;
}
Por cierto, este código es también el empleado en la plantilla de La Trucoteca de Blogs para los Tooltips, y puedes decorarlo a tu gusto. Para ello te indicaremos algunas partes del Css que puedes modificar:

  • color: #0080FF;     -> Color del enlace.
  • color: #002AFE;     ->Color del enlace al pasar el cursor por encima.
  • color: #08088A;     ->Color del enlace mientras se hace clic en él.
  • border: 2px solid #088A08;  ->2px (grosor del borde del tooltip), #088A08 (color del borde del tooltip), solid (estilo del borde del tootltip), que también puede ser (y si tu quieres):
none - Objeto sin borde
hidden - Borde del objeto oculto
dotted - Borde punteado · · ·
dashed - Borde discontinuo - - -
solid - Borde continuo (este es el borde que utilizaremos)
double - Borde doble
groove - Borde con sombra oscura
ridge - Borde con sombra clara
inset - Borde 3D hacia afuera
outset - Borde 3D hacia adentro

  • background-color: #74DF00;    ->color de relleno/fondo del tooltip.
  • color: #0B0B0B;   ->color de la letra del tooltip.
  • font-size: 8pt;   ->tamaño de la letra del tooltip.
  • font-family: Comic Sans MS;   ->Fuente (puede ser Segoe UI,  Trebuchet MS, etc).
  • text-align: left;   -> Alineación del texto del tooltip.
3. Tras personalizarlo a tu medida, GUARDAMOS CAMBIOS.
4. Ahora, cada vez que queramos usar los tooltips en un enlace deberemos emplear este código:

<a href="URL-DE-LA-PAGINA" class="tooltip">TITULO-DEL-ENLACE<span>CONTENIDO-TEXTO-DEL-TOOLTIP</span></a>

Y sustituye, URL-DE-LA-PAGINA, por la dirección de la página a la que quieres enlazar, como, por ejemplo," http://blogger.com".
TITULO-DEL-ENLACE, por el texto que aparecerá antes de poner el cursor, como, por ejemplo, "Blogger".
CONTENIDO-TEXTO-DEL-TOOLTIP, por el texto que saldrá al poner el cursor sobre el enlace, es decir, lo que saldrá dentro del Tooltip, como, por ejemplo, "en esta página creé mi blog".

¡Y ya podrás disfrutar de un bonito y decorado título para tus enlaces!

13 comentarios:

  • Global Metion Blog

    Wow! Ya tienes dominio personalizado que bien! Me alegro mucho por ti!!! :P

  • La Trucoteca de Blogs

    Hola GMB!!
    Muchísimas gracias por haberte acordado y por comentar ;)
    ¡¡¡Saludos!!!!

  • Cari Y Yoly

    Felicidades por el dominio!
    Feliz 2010!
    Besos

  • La Trucoteca de Blogs

    Hola Cari y Yoly!!
    Qué alegria que vengais por aquí :)
    Muchísimas gracias por vuestro comentario ;) , nosotros os deseamos también unas muy felices fiestas y que el año 2010 os traiga muchas alegrías.

    ¡Muchos saludos y nos vemos!

  • Vku

    Muchas felicidades por el propio dominio y feliz 2010

  • ordago13

    Feliz año familía de la trucoteca¡¡¡

    Muy bueno el truco

  • La Trucoteca de Blogs

    Hola Vku!
    Muchas gracias por tu visita ;)
    ¡Feliz navidad y próspero año nuevo!

    Y Ordago!
    ¡Nos alegra mucho que te pases por aquí :D!
    Te deseamos unas muyyy felices fiestas :)
    ¡Nos vemos por aquí!

  • Salón de Literatura Cajamarquina

    Hola Javier y Germán muy interesante su blog, estare siempre visitandolos para aprender más cositas interesantes para mi blog, Les deseo un feliz año 2010 no tomen mucho chicos, saludos desde Cajamarca Perú

    Exitos.

  • La Trucoteca de Blogs

    Hola Salón de Literatura Cajamarquina
    Bienvenid@ al blog y gracias por tu comentario ;)
    Esperamos verte de nuevo por aquí otro día, ya sabes que estamos para lo que haga falta :)
    ¡Nos vemos!

  • Omar

    Gracias algo muy elegante para el blog, deje los colores pues combinan can los míos, saludos

  • La Trucoteca

    Hola Omar!
    Nos alegra que te haya gustado este efecto tan chulo :) :)
    ¡Saludos desde España!

  • kiras

    todavia no puedo consegir que el cuadro salga sobre del link no abajo alguien sabe como?

  • La Trucoteca

    Kiras, prueba a sustituir, en a.tooltip:hover span{ , la parte top: 2.5em;, por top: -30px;.
    De esta manera estaremos subiendo la posicion del cuadrito (cuanto más quieras subirlo, mayor valor negativo tienes que dar)

    ¡Saludos!

  • Ir Arriba