Como hacer un tooltip

[sancroce]

Hola gente:
Quisiera recibir un poco de ayuda en el desarrollo de un tooltip. Algo asi como el de este foro al pararse sobre una entrada (o mensaje).

Estuve intentando con lo siguiente:

a) Una capa (en principio invisible)
b) una funcion Mensaje: Que cambiara y mostrara la <div> en un posicion
c) una tabla donde su <TD> se vera: <Td onmouseover("mensaje(300);")>

en sintesis:
<script language="JavaScript">function Mensaje(pTop){ tooltips.top=pTop;}
</script>

<div id="tooltip" style="position:absolute;width:195px;height:22px; z-index:100;border: 1px none #000000"> ></div>
<table><tr><td onmouseover="mensaje(300);">nada</td></tr></table>


OBVIAMENTE, esto no me funciono y no se para donde ir... alguna ayuda?

SALUDOS

[Rafael]

¿Y si preguntas en el foro JavaScript?

[kemie]

puedes intentar con estos scripts:
http://www.dustindiaz.com/sweet-titles/
http://css.experiments.severnsolutio...html/tooltips/

[sancroce]

Gracias por la info, Kemie:

Perdon, pero no sabia donde postear esta pregunta. Crei que podria hacerce con CCS

Gracias

[Rafael]

Si usas el atributo title en tus imagenes y links te aparece como el globito por default, intentalo.

[RoQ]

si se puede con CSS, no me acuerdo de que web lo saque (el maldito NVU borro los comentarios) pero el enlace estaba en este foro

Código HTML:

a.info{ position: relative;
    z-index: 24;
    color: blue;
    text-decoration: none;
    }

  a.info:visited{ color: gray;
    text-decoration: none;
    }

  a.info:hover{
    z-index: 25;
    color: black;
    font-weight: 900;
    }

  a.info:active{ color: green;
    text-decoration: none;
    }

  a.info span{ display: none;
    }

  a.info:hover span{ border: 1px solid rgb(255, 181, 177);
    display: block;
    position: absolute;
    top: 2em;
    left: 2em;
    width: 15em;
    background-color: rgb(248, 160, 159);
    color: purple;
    font-size: 8pt;
    text-align: center;
    }

y luego pones el enlace

Código HTML:

<a href="paginaenlazada.htm" class="info">Enlace a paginaenlazada<span>texto en el tooltip</span></a> 

y se ve asi cuando pasa el mouse por el enlace:

no se porque no me salio el puntero cuando tome el screenshoot.
Y como lo que quieres que se vea va entre <span> y </span> puedes poner casi cualquier cosa incluido imagenes.

EDIT: aqui esta el enlace

[programeitor]

muy bueno este metodo.

[edudw]

Holas.

Yo pregunte algo parecido hace un tiempo, este es el post:

http://www.forosdelweb.com/f53/poner-estilo-etiqueta-explicacion-palabras-enlaces-alt-title-309290/

[RoQ]

Iniciado por edudw

Holas.

Yo pregunte algo parecido hace un tiempo, este es el post:

http://www.forosdelweb.com/showthread.php?t=309290

ajap, de ahi lo saque

[programeitor]

metiendo toda clase de objetos en el span se pueden hacer unos tooltips realmente guapos.

[Rafael]

Aunque si no se soporta bien el css estos tooltips pueden ser algo estorbosos.

Revisa tu doctype y media.

[RoQ]

funciona bien en html 4.01 transicional, solo en Opera se descuasra un poco, pero no siempre

[sancroce]

CLARO: Muchas gracias a todos por esto. PERO, mas puntualmente lo que busco es:

Con el resultado de una busqueda se genera una tabla con x registros. Como ya adivinaran lo que deseo es que cada vez que se posicionen sobre un registro aparezca el tooltip (ahora que pienso, tambien estaria bueno que se despliegue el registro tipo un arbol de 2 nodos). Para esto solo se me ocurre poner un "#" en el link, pero ¿habra otro forma de hacer esto. Digo sobre el <tr>?

Saludos y gracias.

[kemie]

por lo menos con el ultimo enlace que te puse, se puede hacer con cualquier elemento (solo hay que especificarlo en el js)