Un ejemplo del Tooltip usando sólo CSS:
Código CSS:
Ver original<style type="text/css">
a.Ntooltip {
position: relative; /* es la posición normal */
text-decoration: none !important; /* forzar sin subrayado */
color:#0080C0 !important; /* forzar color del texto */
font-weight:bold !important; /* forzar negritas */
}
a.Ntooltip:hover {
z-index:999; /* va a estar por encima de todo */
background-color:#000000; /* DEBE haber un color de fondo */
}
a.Ntooltip span {
display: none; /* el elemento va a estar oculto */
}
a.Ntooltip:hover span {
display: block; /* se fuerza a mostrar el bloque */
position: absolute; /* se fuerza a que se ubique en un lugar de la pantalla */
top:2em; left:2em; /* donde va a estar */
width:250px; /* el ancho por defecto que va a tener */
padding:5px; /* la separación entre el contenido y los bordes */
background-color: #0080C0; /* el color de fondo por defecto */
color: #FFFFFF; /* el color de los textos por defecto */
}
</style>
Código HTML:
Ver original<a class="Ntooltip" href="#"> el texto visible
... el texto oculto (cualquier código HTML) ......
<a class="Ntooltip" href="#"> Otro texto visible
y su mensaje oculto