Tooltip dinamico con Tipsy

[Wubullo]

Ho scaricato questo bello script dalla sezione Javascript --> Tipsy .

Lo script si presta bene ad essere personalizzato e adattato alle proprie esigenze. Solo una cosa non sono riuscito a risolvere: associando lo stesso "id" a un qualunque tag per più di una volta nella stessa pagina, lo script non funziona... O, per meglio dire, funziona solo per il primo elemento a cui era associato quell'"id" e non per i successivi...
Se si prova, per seguire l'esempio fornito nel link, ad associare per due volte di seguito ad <a id="north">, il tooltip compare solo una volta, mentre non funziona nel secondo caso...

E' possibile modificare la sintassi dello script affinché il tooltip compaia sempre, ogni volta che ad <a> viene associato lo stesso "id"? :master:

Vi ringrazio per l'attenzione

[Wubullo]

Sono riuscito a risolvere!

Per chi fosse interessato, ecco la soluzione.

L'errore nasce da una distrazione: nell'esempio fornito dall'autore, lo script funziona associando un certo valore all'attributo "id".

<script type='text/javascript'>
   
  $(function() {
   
    $('#tooltip').tipsy();
    $('#north').tipsy({gravity: 'n'});
    $('#south').tipsy({gravity: 's'});
    $('#east').tipsy({gravity: 'e'});
    $('#west').tipsy({gravity: 'w'});
   
  });
</script>

Tuttavia, anche il consorzio W3 stabilisce che associare lo stesso "id" ad elementi diversi all'interno della medesima pagina è "deprecated"; tanto che, con questo metodo, lo script non funziona.

Per risolvere, basta usare le classi CSS al posto degli "id":

<script type='text/javascript'>
   
  $(function() {
   
    $('.tooltip').tipsy();
    $('.north').tipsy({gravity: 'n'});
    $('.south').tipsy({gravity: 's'});
    $('.east').tipsy({gravity: 'e'});
    $('.west').tipsy({gravity: 'w'});
   
  });
</script>

e richiamare gli elementi da associare al plug-in con l'attributo

class="tooltip"

(per seguire l'esempio riportato sopra). Poiché, al contrario di quanto succede con gli "id", più elementi possono avere la stessa classe CSS, lo script funzionerà a dovere in tutti i casi.

Alla prossima!