Ver Mensaje Individual
  #4 (permalink)  
Antiguo 01/05/2010, 18:05
tonydelpinogz
 
Fecha de Ingreso: abril-2010
Mensajes: 37
Antigüedad: 14 años
Puntos: 1
Respuesta: Como hago esto ?

Un ejemplo del Tooltip usando sólo CSS:

Código CSS:
Ver original
  1. <style type="text/css">
  2.     a.Ntooltip {
  3.     position: relative; /* es la posición normal */
  4.     text-decoration: none !important; /* forzar sin subrayado */
  5.     color:#0080C0 !important; /* forzar color del texto */
  6.     font-weight:bold !important; /* forzar negritas */
  7.     }
  8.  
  9.     a.Ntooltip:hover {
  10.     z-index:999; /* va a estar por encima de todo */
  11.     background-color:#000000; /* DEBE haber un color de fondo */
  12.     }
  13.  
  14.     a.Ntooltip span {
  15.     display: none; /* el elemento va a estar oculto */
  16.     }
  17.  
  18.     a.Ntooltip:hover span {
  19.     display: block; /* se fuerza a mostrar el bloque */
  20.     position: absolute; /* se fuerza a que se ubique en un lugar de la pantalla */
  21.     top:2em; left:2em; /* donde va a estar */
  22.     width:250px; /* el ancho por defecto que va a tener */
  23.     padding:5px; /* la separación entre el contenido y los bordes */
  24.     background-color: #0080C0; /* el color de fondo por defecto */
  25.     color: #FFFFFF; /* el color de los textos por defecto */
  26.     }
  27. </style>
Código HTML:
Ver original
  1. <a class="Ntooltip" href="#">
  2.      el texto visible
  3.           ... el texto oculto (cualquier código HTML) ......
  4. </span>
  5. </a>
  6. <br><p>
  7. <a class="Ntooltip" href="#">
  8.     Otro texto visible
  9.     y su mensaje oculto
  10. </span>
  11. </a>

Última edición por tonydelpinogz; 01/05/2010 a las 18:07 Razón: codigo