Foros del Web » Programando para Internet » Javascript » Frameworks JS »

qtip dinamico (tooltip para todos los elementos)

Estas en el tema de qtip dinamico (tooltip para todos los elementos) en el foro de Frameworks JS en Foros del Web. Que tal buen dia, llevo todo el dia intentando hacer esto y no encuentro solucion. La idea es que al pasar el mpuse por un ...
  #1 (permalink)  
Antiguo 01/12/2011, 18:16
 
Fecha de Ingreso: febrero-2010
Mensajes: 49
Antigüedad: 14 años, 1 mes
Puntos: 1
Pregunta qtip dinamico (tooltip para todos los elementos)

Que tal buen dia, llevo todo el dia intentando hacer esto y no encuentro solucion.

La idea es que al pasar el mpuse por un elemento DIV se despliegue un TOOLIP sobre de el que muestre lo que quiero que diga.

Encontré un plugin para Jquery llamado Qtip. Funciona bien y tiene opciones utiles, el problema es que al cargar la pagina, solo crea el tip para el primer elemento con el nombre.

Quiero que todos los elementos con el id "#module" muestren un tooltip independiente.
El codigo es el siguiente.

Código PHP:

$('#module').qtip({
   
content: {
      
attr'title'
   
},
   
style: {
                    
classes'ui-tooltip-tipsy ui-tooltip-shadow'
                
},
                
position: {
                    
my'top center',
                    
at'top center'target'mouse',
                    
viewport: $(window), 
                     
adjust: {
                    
x10,  y10
         
}
      },
      
hide: {
         
fixed:
      },
}) 
Con esto el primet "#module" muestra el tooltip, pero el resto no lo hace, quiero hacerlo dinamico con un onmouseover en la etiqueta. algo como esto:

Código HTML:
<div id="#module" title="este es el tooltip del primer elemento" onmouseover="tooltip(this);">Contenido</div>
<div id="#module" title="este es el tooltip del segundo elemento" onmouseover="tooltip(this);">Contenido</div> 
Al pasar el mouse se eecutaria la siguiente funcion:

Código PHP:
function tooltip(elemento){
                                  
//Pruebo si se está manipulando el id
                                //th = $(elemento).attr('title'); 
                                //alert(elemento);
$(elemento).qtip({
   
content: {
      
attr'title'
   
},
   
style: {
                    
classes'ui-tooltip-tipsy ui-tooltip-shadow'
                
},
                
position: {
                    
my'top center',
                    
at'top center'target'mouse',
                    
viewport: $(window), 
                     
adjust: {
                    
x10,  y10
         
}
      },
      
hide: {
         
fixedtrue
      
},
})

COn esto dberia de funcionar, pero al pasar el mouse no pasa nada, Si pongo un alert para corroborar que la funcion este funcionando, y que la informacion del div es correcta aparece el cuadro de dialogo, pero nada de el tip.

Podrian ayudarme un poco?

Gracias de antemano
  #2 (permalink)  
Antiguo 02/12/2011, 08:33
 
Fecha de Ingreso: enero-2008
Ubicación: Buenos Aires
Mensajes: 305
Antigüedad: 16 años, 2 meses
Puntos: 14
Respuesta: qtip dinamico (tooltip para todos los elementos)

La implementación del qtip no es problema

El problema lo estas mencionando tú mismo al principio del post:
Cita:
Quiero que todos los elementos con el id "#module" muestren un tooltip independiente.
El ID, es el "Identificador" del elemento, por lo tanto el identificador tiene que ser único para que pueda identificar al elemento.

Entonces le aplica el estilo al primer id que encuentra ya que entiende que debe ser único.

Para resolverlo puedes modificar el id=module por class=module, entonces la clase puede coincidir en varios elementos, de hecho se usa exactamente para esto mismo.

Y en el javascript quedaría:
Código Javascript:
Ver original
  1. $('#module').qtip({
  2.    content: {
  3.       attr: 'title'
  4.    },
  5.    style: {
  6.       classes: 'ui-tooltip-tipsy ui-tooltip-shadow'
  7.       },
  8.       position: {
  9.             my: 'top center',
  10.             at: 'top center', target: 'mouse',
  11.             viewport: $(window),
  12.             adjust: {
  13.                   x: 10,  y: 10
  14.             }
  15.       },
  16.       hide: {
  17.          fixed:
  18.       },
  19. });
  #3 (permalink)  
Antiguo 02/12/2011, 13:05
 
Fecha de Ingreso: febrero-2010
Mensajes: 49
Antigüedad: 14 años, 1 mes
Puntos: 1
Respuesta: qtip dinamico (tooltip para todos los elementos)

Gracias por la aclaracion, Tenia la idea erronea que un id y un class servian para lo mismo, ahora sé que tengo que profundizar mas entre sus utilidades.

El codigo ahora me funciona bien. Las clases son muy utiles.

Gracias!!

Etiquetas: bonsai, dinamico, jquery, qtip, radio
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 01:10.