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