Tooltip con CSS – Ese letrerito …

 

TOOLTIP

 

 

Un tooltip (también llamado descripción emergente) es una herramienta de ayuda visual, que funciona al situar o pulsar con el ratón sobre algún elemento gráfico, texto, enlace,… mostrando una ayuda adicional para informar al usuario de la finalidad del elemento sobre el que se encuentra.

Los tooltip son una variación de los globos de ayuda y es un complemento muy usado en programación, dado que proporcionan información adicional sin necesidad de que el usuario la solicite. (Wikipedia)

 

Pasa el ratón por aquí: tooltip.Este es un ejemplo de tooltip. Si te gusta, sigue las siguientes instrucciones. :-)

  Recuerda hacer una copia de seguridad de tu plantilla antes de hacer cualquier modificación

 

Un sencillo código en CSS.

Nota: Por desgracia, es posible que los diseños y estilos no funcionen igual en todos los navegadores.

Entra en tu plantilla en Diseño / Edición de HTML y justo antes de ]]></b:skin> copia y pega el siguiente código:

<!-- ESTILO PARA TOOLTIP -->

a:hover {
text-decoration:none;
z-index: 999;
}

a.tooltip span {
z-index: 999;
display:none;
padding:15px 15px;
width:180px;
border-color: #929090;
border-style: outset;
}

a.tooltip:hover span{
display:block;
position:absolute;
background-color: #F3F781;
color: #000000;
font-size: 7pt;
text-align: justify;
margin: 5px 5px;
padding-left: 15px ;
padding-right: 15px;
}
<!-- FIN ESTILO TOOLTIP -->


Guarda la plantilla y podrás utilizarlo de la siguiente manera utilizando la class=”tooltip”.

La forma siempre será:

<a class="tooltip">EXPRESION<span>CONTENIDO DEL TOOLTIP</span></a>

Ejemplos: 

a.)  Para un texto:

<a class="tooltip">(Pasa el ratón por aquí)<span>Esto es un tooltip al pasar el ratón por un texto.</span> </a>

(Pasa el ratón por aquí)Esto es un tooltip al pasar el ratón por un texto.

b.) Para un enlace:

<a class="tooltip" href="http://www.google.com" target="_blank">Google<span>Esto es un tooltip al pasar el ratón por un enlace.</span></a>

Pulsa para enlazar: GoogleEsto es un tooltip al pasar el ratón por un enlace.

c.)  Para una imagen:

<a class="tooltip"><img src="URL DE LA IMAGEN" /><span>Esto es un tooltip al pasar el ratón por una imagen.</span></a>

Esto es un tooltip al pasar el ratón por una imagen. Pasa el ratón por la imagen.

 

d.)  También puedes introducir una imagen dentro del tooltip:

<a class="tooltip">(Pasa el ratón por aquí)<span><img src="URL DE LA IMAGEN" />Esto es un tooltip con una imagen al pasar el ratón por un texto.</span></a>


(Pasa el ratón por aquí)Esto es un tooltip con una imagen al pasar el ratón por un texto.

e.)  Y también puedes tener una imagen dentro del tooltip al pasar el ratón por un enlace o por un texto:

<a class="tooltip" href="http://www.google.com" target="_blank">Google<span><img src="URL DE LA IMAGEN" /></span></a>

Google

 

Personalización

Para que se ajuste a tu diseño o preferencias, puedes modificar a tu gusto:

width: (anchura del cuadro del tooltip)
border-color: (color del borde del marco) 
border-style: (estilo del borde del marco)

background-color: (color de fondo del tooltip) 
color: (color del texto del interior del tooltip) 
font-size: (tamaño del texto)
text-align: (Justificación del texto)

Te dejo aquí el enlace a la herramienta que te puede ayudar con los códigos de color:

Generador códigos de color