qtip dinamico (tooltip para todos los elementos)

[yamatadvd2000]

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: {
                    x: 10,  y: 10
         }
      },
      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: {
                    x: 10,  y: 10
         }
      },
      hide: {
         fixed: true
      },
})
} 
   

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

[kokoou]

La implementación del qtip no es problema

El problema lo estas mencionando tú mismo al principio del post:

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:

$('#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: {
                  x: 10,  y: 10
            }
      },
      hide: {
         fixed:
      },
});
 

[yamatadvd2000]

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!!