Tooltip para Blogger

Duración: 2 min
Nivel: Medio o Avanzado para el uso

Si queremos colocar un tooltip en Blogger,  debemos ir a: Plantilla / Editar HTML y colocar el siguiente código  antes o sobre el: ]]></b:skin> de nuestra plantilla, este código lo verán al inicio de la plantilla como: <b:skin></b:skin> solo deben hacer clic sobre el triángulo de color negro que está a la izquierda. El código lo muestro con unas medidas estandar que más adelante explicaré con otros ejemplos. Por favor lean todo porque después de los códigos coloco ejemplos y explico posibles errores que pueden presentarse.

a.tooltip {
position: relative; 
text-decoration: none !important; 
}

a.tooltip:hover {
z-index:999; 
}

a.tooltip span {
display: none; 
}

a.tooltip:hover span {
display: block; 
position: absolute; 
top:2em; left:2em; 
width:250px; 
padding:5px; 
background-color: #98FB98; 
border: solid 1px #20B2AA; 
color: #FFFFFF; 
}
_______________________________

Explicación de las partes más importantes:

top: Es la ubicación del tooltip, más adelante con mi código verán la diferencia.
width: Ancho del tooltip
padding: Separación del contenido con los bordes, solo se nota si la medida es grande.
background-color: Color de fondo para el tooltip.
border: Grosor del porde en px, y su color respectivo.
color: Color del texto dentro del tooltip.

Luego de que hemos agregado el código a nuestra plantilla, la forma de usarlo sería la siguiente y se debe hacer en el modo"HTML" cuando realizamos nuestra entrada en Blogger:

<a class="tooltip" href="URL que redirecciona">
   Texto del que sale el tooltip
<span>
   El texto o imágenes que van dentro del tooltip
</span>
</a>

Si se fijan, el tooltip es solo cuestión de agregar: class="tooltip"  después de la «««  <a   »»» y agregar <span></span> antes de la ««« </a> »»»

Ahora les voy a mostrar como se vería con una imagen centrada en Blogger:

<div class="separator" style="clear: both; text-align: center;">
<a class="tooltip" href="http://www.charkleons.com/2011/03/releases.html" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://1.bp.blogspot.com/-oOZv8-KipLM/Tl8kdf2qLRI/AAAAAAAAA7w/IdSe4d1_E8s/s1600/Releases1.png" /><span>Movies, T.V Shows and more. Lo que no encuentres en una página está en otra</span></a></div>


Si quieren que la imagen no use una url que redireccione, dejen la parte de href así: href="" (sin nada dentro de las comillas).

Y ahora cómo se vería con una palabra como tooltip y una imagen en su interior. Si se quisiera usar solo con texto sería cuestión de eliminar la parte de la imagen <img ***** /> es decir, quitar la etiqueta del img.

<div style="text-align: center;">
Un agradecimiento muy especial para <a class="tooltip" href="http://www.eltallerdejazmin.com/" target="_blank">Jazmín<span><img border="0" src="http://3.bp.blogspot.com/-UJR9zjb-XVw/UIx_ukWyahI/AAAAAAAAAEY/F83sctqwVyM/s320/ETJ.png" /></span></a> por toda su colaboración.</div>

Un agradecimiento muy especial para Jazmín por toda su colaboración.

Igualmente pueden incluir el iframe de un video de youtube entre las etiquetas de los span <span></span> lógicamente el ancho del video debe ser acorde al tamaño que dejaron para la caja del tooltip.

Estos ejemplos de tooltip son con el código personalizado que yo uso, el cual al final les mostraré para que puedan compararlo con el primero (sin editar) que les mostré.

Es muy importante que la aplicación del tooltip se haga en modo "HTML" para que se vea bien, ya que si por ejemplo lo agregamos en modo "HTML" y luego pasamos a modo "Redactar" se perderán los <span></span> de los códigos y tendremos que pasar a modo "HTML" y agregarlos nuevamente. Es un error muy común.

Mi código:

a.tooltip {
position: relative; 
text-decoration: none !important; 
}

a.tooltip:hover {
z-index:999; 
}

a.tooltip span {
display: none; 
}

a.tooltip:hover span {
display: block; 
position: absolute; 
top:-2em; right:14em
width:300px;
padding:1px
background-color: #000000
border: solid 2px #FFFFFF
color: #FFFFFF;
}


Espero que esta información les sea de mucha utilidad.

Gracias.


Cómo se coloca un aviso que salga de un texto en blogger, cómo se hace una caja que salga del texto en blogger, cómo hago que salga una imagen del texto en blogger, código del tooltip para blogger, tutorial poner tooltip en blogger,