ir arriba
Google

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;

imagen ejemplo tooltipCon 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




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)


Ultimos Posts

Enlazáme

O puedes tambier copiar y pegar las siguientes opciones; elige la que mas te guste!! Trucos blog ( Esta última simplemente selecciona el enlace y copia y pega en tu espacio )