Configuración:
.
Biología
.
Botánica
.
Tecnología
.
Sociedad
A mis trece años de edad, el día 2 de Diciembre de 2007 inicié ‘El Balcón de Jame’. Este humilde espacio, cuyo secreto siempre fue el de compartir sin recibir nada a cambio, me dio la oportunidad de conocer un mundo nuevo, un entorno en el que me sentía yo mismo.

Hoy, 17 de abril de 2011 finalizo esta etapa de mi vida con una gran sonrisa y junto al recuerdo que este blog y cada unos de vosotros me habéis concedido.

He sido bloggero.

Jaime Trujillo Escobedo.

Tooltip decorado

Un tooltip es un cuadrito que aparece al poner el cursor sobre algún enlace. Normalmente el tooltip explica y nos informa sobre algo relacionado con el enlace.

Los tooltips son originalmente de un color amarillo-crema pero ahora podrás ponerlos del color que más te guste...



Para poner un tooltip en tu blog deberás agregar unos bloques en el CSS, de forma que podrás "tunear" tu cartelito.

Diseño>edición HTML>expandimos artilugios

Busca la etiqueta ]]></b:skin> y encima pega estas definiciones:
a.tooltip{
position: relative;
z-index: 24;
color: #707070;
text-decoration: none;
}

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

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

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

a.tooltip span{ display: none;
}

a.tooltip:hover span{
border: 1px solid #818283;
display: block;
position: absolute;
top: 2.5em;
left: 3em;
width: 14em;
background-color: #cfcfcf;
color: #707070;
font-size: 8pt;
text-align: left;
padding-left: 2px ;
padding-right: 2px;
}
Puedes cambiar el tooltip y decorarlo a tu gusto:

color: #707070; Esto es el color que tendrá el link.

color: #a3a3a3; Esto es el color que tendrá el link al pasar el cursor por encima.

color: #707070; Esto es el color que tendrá el link mientras hacemos clic.

border: 1px solid #818283; Determina el borde del tooltip. 1px es el grosor, solid el estilo (puedes ver los estilos de borde en esta entrada) y #818283 es el color.

background-color: #cfcfcf; Es el color de fondo que tiene el tooltip.

color: #707070; Es el color de la letra del tooltip.

font-size: 8pt; El tamaño del texto en el tooltip.

Una vez tuneado, guarda cambios.

Ahora, siempre que quieras insertar el enlace con el tooltip usa esta línea:
<a href="URL DE LA PAGINA" class="tooltip">TITULO DEL ENLACE<span>EL TEXTO DEL TOOLTIP</span></a>
Sustituye...

URL DE LA PAGINA por la dirección de la web o blog que quieres enlazar, por ejemplo: http://google.es/

TITULO DEL ENLACE por el título del enlace, por ejemplo Google.

EL TEXTO DEL TOOLTIP por el texto que aparecerá en el tooltip, por ejemplo clic aquí para ir a Google.

¡Y ya tendrás tu tooltip!

Joan Irazu dice...

Porque el mensaje se encuentra en la esquina de mi blog...???

Jaime Trujillo Escobedo dice...

CHiCken, ¿podrías indicarme el lugar en el que insertaste el tooltip, es decir, el enlace al que se lo pusiste?

Joan Irazu dice...

Esta imagen donde muestra donde aparece!
http://i49.tinypic.com/10pa58g.jpg

Jaime Trujillo Escobedo dice...

CHiCken, debo decirte que aún con la imagen no logro ver el tooltip. El menú de navegación y el icono de la casa no tiene el mismo aspecto :S.

Escribe tu comentario en la entrada...

El Balcón de Jaime fue terminado el 17 de abril de 2011. Leer despedida.

Me gustaría conocer tu opinión. El comentario será moderado y en breve se publicará.

Si deseas incluir un enlace utiliza este código:

<a href="Dirección de tu página">Titulo del enlace</a>

Para publicar un código haz uso del Conversor de entidades.

Intenta escribir sobre algo relacionado con el artículo. Si no lo haces, podría tardar en responderte.

¿Problemas al comentar? Utiliza el formulario antiguo