[jQuery plugin] Tooltipsy: Aggiungere facilmente Tooltip animati

Continuiamo la nostra serie di articoli riquardanti i plugin jQuery che possono tornare utili nello sviluppo delle vostre pagine html o applicazioni web.

Oggi vi parlo di Tooltipsy, un efficiente plugin jQuery per aggiungere facilmente funzionalità tooltip alle vostre pagine avendo il pieno controllo delle CSS, delle animazioni e della posizione.

Il tooltip è un comune elemento dell’interfaccia grafica dell’utente. Si tratta del piccolo “box” che appare quando l’utente passa col cursore sopra un oggetto senza cliccarlo, che contiene informazioni supplementari riguardo l’oggetto stesso.

Esso insomma può aiutarci a indirizzare meglio il visitatore, proponendo maggiori informazioni a comparsa, che nel caso fossero inserite staticamente nella pagina ne rovinerebbero il layout grafico. Il tooltip trova un utile applicazione per esempio quando viene aggiunto nei moduli di login o registrazione, nei link, o per consigliare meglio l’utente durante la fase di inserimento dati.

Tooltipsy ci permette di aggiungere questi elementi e di controllarne lo stile in modo molto semplice. Nelle pagine di Tooltipsy potete trovare esempi che ricoprono la maggior parte delle casistiche di cui potreste avere bisogno ed una chiara documentazione.

Installazione

Iniziamo con il download del plugin tooltipsy e andiamolo a posizionare il file tooltipsy.min.js nella directory contenente i nostri file javascript. Successivamente includiamo il file nel nostro HTML come segue:

<script
 type="text/javascript"
 src="/path/to/tooltipsy.min.js">
</script>

CSS

Abbiamo il pieno controllo delle CSS. Di seguito un semplice esempio per iniziare:

.tooltipsy
{
    padding: 10px;
    max-width: 200px;
    color: #303030;
    background-color: #f5f5b5;
    border: 1px solid #deca7e;
}

Attivazione

Il modo più semplice per settare il tooltip è di aggiungere le stringhe all’attributo title e lasciare che tooltipsy faccia il lavoro per noi:

<a title="Show me">
<a title="Me too">

<script type="text/javascript">
$('.hastip').tooltipsy();
</script>

Tooltipsy fa parte sicuramente di quei plugin da aggiungere nella cassetta degli attrezzi da sviluppatore, quindi il mio consiglio è di aggiungere immediatamente il link ai preferiti.

Link | http://tooltipsy.com/

Download Plugin| https://github.com/briancray/tooltipsy/archives/master

Documentazione | http://tooltipsy.com/options.html

Demo | http://tooltipsy.com/samples.html

Forse potrebbero interessarti anche questi articoli:

1. [jQuery] Formly: Plugin per aggiungere facilmente Stile e Validazione ai tuoi Form
2. [jQuery plugin] autoResize della textarea in stile Facebook
3. [JavaScript ] Live.js: auto-refresh delle pagine ogni volta che vengono aggiornate
4. HTML to PDF: Convertitore online da HTML a PDF
5. Come realizzare un eBook per iPad con Baker il framework italiano