Tooltip en CSS

Tooltip en CSS. ¿Que es un tooltip? tranquilos que no desvario, Un tooltip es una nota aclaratoria que aparece al posar el ratón sobre una palabra, un ejemplo visual que os ayude a entender mejor el concepto;

Con la imagen mejor ¿NO?
Para conseguir este efecto necesitaremos el código que aplicaremos en el head de la edición html de la plantilla del blog (recordar siempre antes de que se cierre la etiqueta)

CODIGO CSS

a{
z-index:10;
}
a:hover{
position:relative;
z-index:100;
}
a span{
display:none;
}
a:hover span{
display:block;
position:absolute;
float:left;
white-space:nowrap;
top:-2.2em;
left:.5em;
background:#fffcd1;
border:1px solid #444;
color:#444;
padding:1px 5px;
z-index:10;
}

Todo este código debe ir entre etiquetas Style
De el anterior código para poder personalizar el estilo de vuestro tooltip podeis utilizar las siguientes variables;

•  background:#fffcd1;
  border:1px solid #444;
  color:#444;
  padding:1px 5px;

A continuación el código que debereis implementar cada vez que lo queráis utilizar, se aplica en la redacción de vuestro post pero en edición de html


<a href="#">aqui el texto normal <span>aqui el tooltip</span></a>

Demo del ejemplo

aqui el texto normal aqui el tooltip

Nota; Cuando apliqueis el código en la redacción de vuestro post encontrareis lo siguiente

No habeis hecho nada mal, así es como se visualiza mientras redacteis el post, cuando le deis a publicar aparecerá el efecto. Espero que de ahora en adelante en vuestros posts hagais aclaraciones pero tampoco sin pasarse ;O)

tags blog edicion+html trucos trucos+blogs plantillas+gratis plantillas+blog scripts+gratispersonalizar+blog generadores+bloggeneradores blogtrucos blogtodo para tu blogedicion html blogutilidades blog