Foros del Web » Creando para Internet » CSS »

Como hacer un tooltip

Estas en el tema de Como hacer un tooltip en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 26/10/2005, 18:58
 
Fecha de Ingreso: mayo-2005
Mensajes: 42
Antigüedad: 12 años, 6 meses
Puntos: 0
Como hacer un tooltip

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
  #2 (permalink)  
Antiguo 26/10/2005, 23:19
Avatar de Rafael
Modegráfico
 
Fecha de Ingreso: marzo-2003
Mensajes: 8.954
Antigüedad: 14 años, 9 meses
Puntos: 1802
¿Y si preguntas en el foro JavaScript?
  #3 (permalink)  
Antiguo 27/10/2005, 03:36
Avatar de kemie  
Fecha de Ingreso: junio-2003
Ubicación: estocolmo<-->mexico
Mensajes: 1.627
Antigüedad: 14 años, 5 meses
Puntos: 1
puedes intentar con estos scripts:
http://www.dustindiaz.com/sweet-titles/
http://css.experiments.severnsolutio...html/tooltips/
__________________
::::::::::::::::::::::::::::: WebHostNinja | diseñorama.com::::::::::::::::::::::::::::::
  #4 (permalink)  
Antiguo 28/10/2005, 09:44
 
Fecha de Ingreso: mayo-2005
Mensajes: 42
Antigüedad: 12 años, 6 meses
Puntos: 0
Gracias por la info, Kemie:

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

Gracias
  #5 (permalink)  
Antiguo 28/10/2005, 09:49
Avatar de Rafael
Modegráfico
 
Fecha de Ingreso: marzo-2003
Mensajes: 8.954
Antigüedad: 14 años, 9 meses
Puntos: 1802
Si usas el atributo title en tus imagenes y links te aparece como el globito por default, intentalo.
  #6 (permalink)  
Antiguo 28/10/2005, 10:12
Avatar de RoQ
RoQ
 
Fecha de Ingreso: abril-2005
Mensajes: 771
Antigüedad: 12 años, 8 meses
Puntos: 0
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

Última edición por RoQ; 28/10/2005 a las 10:51
  #7 (permalink)  
Antiguo 28/10/2005, 22:37
Avatar de programeitor  
Fecha de Ingreso: febrero-2005
Mensajes: 994
Antigüedad: 12 años, 10 meses
Puntos: 9
muy bueno este metodo.
  #8 (permalink)  
Antiguo 28/10/2005, 23:37
 
Fecha de Ingreso: abril-2004
Mensajes: 634
Antigüedad: 13 años, 7 meses
Puntos: 2
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/
__________________
Una a una resuelvo mis dudas... y una a una se me suman mas dudas... :adios:
  #9 (permalink)  
Antiguo 29/10/2005, 09:40
Avatar de RoQ
RoQ
 
Fecha de Ingreso: abril-2005
Mensajes: 771
Antigüedad: 12 años, 8 meses
Puntos: 0
Cita:
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
  #10 (permalink)  
Antiguo 29/10/2005, 10:38
Avatar de programeitor  
Fecha de Ingreso: febrero-2005
Mensajes: 994
Antigüedad: 12 años, 10 meses
Puntos: 9
metiendo toda clase de objetos en el span se pueden hacer unos tooltips realmente guapos.
  #11 (permalink)  
Antiguo 29/10/2005, 17:26
Avatar de Rafael
Modegráfico
 
Fecha de Ingreso: marzo-2003
Mensajes: 8.954
Antigüedad: 14 años, 9 meses
Puntos: 1802
Aunque si no se soporta bien el css estos tooltips pueden ser algo estorbosos.

Revisa tu doctype y media.
  #12 (permalink)  
Antiguo 31/10/2005, 10:17
Avatar de RoQ
RoQ
 
Fecha de Ingreso: abril-2005
Mensajes: 771
Antigüedad: 12 años, 8 meses
Puntos: 0
funciona bien en html 4.01 transicional, solo en Opera se descuasra un poco, pero no siempre
  #13 (permalink)  
Antiguo 04/11/2005, 07:41
 
Fecha de Ingreso: mayo-2005
Mensajes: 42
Antigüedad: 12 años, 6 meses
Puntos: 0
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.
  #14 (permalink)  
Antiguo 05/11/2005, 12:41
Avatar de kemie  
Fecha de Ingreso: junio-2003
Ubicación: estocolmo<-->mexico
Mensajes: 1.627
Antigüedad: 14 años, 5 meses
Puntos: 1
por lo menos con el ultimo enlace que te puse, se puede hacer con cualquier elemento (solo hay que especificarlo en el js)
__________________
::::::::::::::::::::::::::::: WebHostNinja | diseñorama.com::::::::::::::::::::::::::::::
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 04:29.