jquery: tooltip

Realizzare un tooltip oggi è veramente semplice dato che questa funzionalità è stat integrata in jQuery UI, e questo, di base, ci semplifica molto il lavoro.

Ovviamente dovremo collegare jquery, jquery ui  e il tema di nostro gradimento. Dopodiché nella nostra pagina inseriremo un div appena formattato con un css semplicissimo e che conterrà nell’attributo title il testo da visualizzare nel css.

<style>
#box{ width:320px; height:240px; border:1px solid #000;}
</style>

<div id="box" title="Testo da visualizzare nel tooltip"></div>

L’attivazione della funzionalità avviene nel solito modo di jquery UI: $(selettore).metodo, ovvero, nel nostro caso, $(‘#box’).tooltip8):

ma noi arrichiremo l’esperienza aggiungendo un effetto fade di transizione e gestendo la durata:

$("#box").tooltip({ hide: { effect: "fade", duration: 1000 } });

L’esempio