.post-body:first-letter { float:left; color: #333333; font-size:100px; font-family:none; line-height:80px; padding-top:1px; padding-right:5px; } font-style: italic; } span.letracapital{ float: left; font-size: 40px; line-height: 35px; /* Dobla el alto de linea menos 1 pixel */ font-family: Georgia, "Times New Roman", Times, serif; color: #2583ad; /* Azul */ padding-right: 5px; } -->

Recent Posts

Hacer tooltip con una imagen

4 feb 2022

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


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;
}


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:

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

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.

No hay comentarios:

Publicar un comentario

Deja tu comentario y en breve te contestaremos