Veréis tengo un problema con el spry tooltip que me está haciendo tirarme de los pelos. Mi intención es tener una serie de vinculos en una lista de palabras dispuestas de manera verical dentro de un acordeon spry, y cuando pase por encima de dichos vinculos me aparezca una miniatura de la foto junto a la palabra, en una posición fija relativa a dicha palabra.
Os pongo una foto para que veáis a lo que me refiero
Aunque en la foto no se ve el puntero dedo, la minitura sale a un offset en x relativo a dicho puntero, por lo que si lo pongo a la izquierda del vinculo me tapa la palabra, mientras que si lo pongo a la derecha me taparía la foto. Lo que quiero es que quede justo en el espacio blanco que hay entre los vinculos y la foto.
Sé muy poco sobre codigo javascript, pero volviendome loco por internet y analizando el codigo del SpryTooltip.js creo que he llegado a la conclusión de donde está la clave para conseguir lo que pretendo. En la linea 211 aparece:
Spry.Widget.Utils.putElementAt(this.tooltipElement , this.pos, {x:this.offsetX, y:this.offsetY}, true);
donde entiendo que "this.pos" es la posición del puntero cuando se apoya en el vinculo y a ella se le aplican los diferentes offset configurables en el codigo.
Si por ejemplo lo modifico así:
Spry.Widget.Utils.putElementAt(this.tooltipElement , {x:this.offsetX, y:this.offsetY}, true);
Ignora por completo la posición del puntero y lo coloca a una posición fija (marcada por los offset) pero con respecto a la posición superior izquierda de la pantalla. Claro, esto me supondría tener que definir absolutamente cada uno de los vinculos, además de que deja de funcionar bien en mi caso ya que la página irá centrada en el navegador así que en el momento que se use una resolución diferente ya no vale.
Creo suponer que habría que indicar que en vez de "this.pos" algo así como "trigger.pos". He probado usando "trigger_element.pos", "trigger_selector.pos", pero nada de ello funciona.
¿Alguien sabe como tengo que modificar este código para que me salga relativamente al a la posición del trigger y no respecto al puntero?
Gracias y un saludo
EDITO: He encontrado la siguiente información en internet, por si a alguien le sirve como orientación
Hacking the Tooltips to an absolute position
You can modify the Tooltips to enforce absolute positioning by changing the JavaScript file.
1) You need to save the SpryTooltip.js as SpryTooltipAbsolutePosition.js to maintain you base file.
2) Make the following change to the JavaScript file (SpryTooltipAbsolutePosition.js)
a. Find the function: Spry.Widget.Utils.putElementAt (about line 210 +/- )
Spry.Widget.Utils.putElementAt(this.tooltipElement , this.pos, {x:this.offsetX, y:this.offsetY}, true);
b. Make two changes - add: “ , this.bottomPos, this.leftPos “
Spry.Widget.Utils.putElementAt(this.tooltipElement , this.pos, {x:this.offsetX, y:this.offsetY}, true, this.bottomPos, this.leftPos);
3) Make the following change to the JavaScript file (SpryTooltipAbsolutePosition.js)
a. Find the function: Spry.Widget.Utils.putElementAt (about line 970 +/- )
Spry.Widget.Utils.putElementAt = function (source, target, offset, biv)
b. Make these changes – add “ , bottomPos, leftPos “
Spry.Widget.Utils.putElementAt = function (source, target, offset, biv, bottomPos, leftPos)
c. Inside the same function: Spry.Widget.Utils.putElementAt (about line 970 +/- ) just above the “return true;”
and below the “if (biv) statement add the following code:
if (biv)
Spry.Widget.Utils.bringIntoView(source);
return true;
It should look like this…
if (biv)
Spry.Widget.Utils.bringIntoView(source);
/* ------------------------------ CHANGES --------------------------------- */
source.style.bottom = bottomPos + 'px';
source.style.left = leftPos + 'px';
source.style.top = '';
/* ------------------------- END - CHANGES ------------------------------ */
return true;
4) One more change…
In the source code of the html file (spryTooltip.html)
In the JavaScript at the bottom of the file (about line 25 +/-)
Find the line of code…
var sprytooltip1 = new Spry.Widget.Tooltip("sprytooltip1", "#sprytrigger1");
Make the following change
var sprytooltip1 = new Spry.Widget.Tooltip("sprytooltip1", "#sprytrigger1" ,{bottomPos:150, leftPos:125} );
5) Save all files and test.
