Introduccion
El Tooltip es el cuadradito que aparece cuando ponemos el cursor encima de un enlace.
Este cuadradito vale para explicarnos algo relacionado con el enlace .Modificando nuestra plantilla
Para poder hacer que el Tooltip funcione en nuestro blog, tenemos que modificar nuestra plantilla.
Nota:
Antes de realizar cualquier cambio en nuestro blog, tendremos que realizar una copia de seguridad del mismo por si algo no sale bien.
Puedes ver en este post como lo hacemos paso a paso
Antes de realizar cualquier cambio en nuestro blog, tendremos que realizar una copia de seguridad del mismo por si algo no sale bien.
Puedes ver en este post como lo hacemos paso a paso
Nos vamos a Tema > HTML
Busca la etiqueta ]]></b:skin> y añade este bloque encima:
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;
}
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;
}
Decorarlo a nuestro gusto
Ahora podemos modificar el codigo a nuestro 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.
Ya puedes guardar los cambios.
Ahora, siempre que quieras insertar el enlace con el tooltip usa esta línea:
Cambiamos..
Lo marcado en rojo por la URL de la pagina que quieras enlazar.
Lo marcado en azul por el titulo del enlace.
Y lo marcado en verde por el texto que aparecera en el tooltip.
0 Comentarios
En breve revisaremos tu comentario para poder publicarlo.
Muchas gracias