tooltip statico jquery

[Bakaburg]

Ciao,
ho una lista dinamica in cui i nomi troppo lunghi vengono tagliati e sostituiti con una versione più corta del nome. Quando vi si passa il mouse sopra appare un tooltip con il nome intero, posizionato in modo da combaciare con il nome, tipo i suggerimenti che si trovano in molti IDE.

Questo è il codice che ho utilizzato.

function appendHover()
{
        ...
    list.find("li").each(function()
    {
        ...
        $(this).hover(function()
        {    
            var liHover = $(this);
            longName.text(liHover.find("span.hide").text());
                        
                        //recupera le coordinate del[*] rispetto al document
            var coords = liHover.offset();
                        //assegna le coordinate, con le opportune correzioni al tooltip (longName)
            longName.offset({top: coords.top - 4, left: coords.left - 8});
                    
            longName.show();
                    …
         }
         … 
    }
} 

(necessario jquery 1.4)


Teoricamente dovrebbe trovare la posizione rispetto a document degli elementi li tagliati e la assegna al tooltip, il cui testo, con le opportune modifiche viene a combaciare cn quello sottostante.

Il problema è che… non funziona.

Se passo il mouse sul li, il tooltip esce posizionato distante da dove dovrebbe, ad occhio e croce come se fosse stato posizionato rispetto al li piuttosto che rispetto al document, usando sempre come coordinate la posizione del li rispetto al document. Se ripasso sul li dopo che il tooltip è scomparso, questo riappare in una nuova posizione che sembra essere di nuovo la posizione del li rispetto al document stavolta calcolato a partire dalla precedente posizione del tooltip. Quindi passandoci molte volte si ha il tooltip che si sposta sempre di più.
Se disattivo la scomparsa del tooltip in modo rimanga visibile anche se sposto il mouse, ripassando il mouse sul li, mentre il tooltip è ancora visibile, questo finalmente si posiziona correttamente.

Qual'è il problema?
Conoscete una soluzione migliore?

[Xinod]

cerca di capire se il problema e' rilevare le coordinate oppure assegnarle
se dipendesse da quest' ultimo passaggio, prova a posizionare questo elemento (che suppongo in posizionamento gia' assoluto) via
.css({'top':coords.top-4,'left':coords.left-8})

ciao

[Bakaburg]

Il problema credo sia nell'assegnazione perché ho visto che il valore assegnato a coord è sempre uguale.
Cmq non posso utilizzare il codice da te suggerito, poiché il tooltip è posizionato sì assolutamente ma rispetto ad un contenitore che è parente sia suo che della lista. quindi anche se prendo le posizioni dei li, rispetto al documento sono applicate al tooltip rispetto a questo container.
Però ripensando al tuo codice potrei risolvere appendendo il tooltip al body, così risolverei. ora provo.
Però mi piacerebbe capire perché il metodo offset non funziona…

[Bakaburg]

Si, funge. Ma mi scoccia avere tutti questi div nel body. Quindi ho trovato un altro modo.
con il metodo position() ho trovato le misure top e left del li e dei suoi genitori fino al cntainer della lista a cui appendo i tooltip. poi passo a questi ultimi le misure e il gioco è fatto!