JavaScript  »  Articoli  »  MooTools 

In questo articolo vedremo come creare dei tooltips con uno dei plugin ufficiali offerti da MooTools: Tips.js. Ricordo che, come specificato nella stessa documentazione ufficiale della libreria, alla base di Tips.js c'è l'idea sviluppata da Alessandro Fulciniti in Bubble Tooltips (qui l'articolo in italiano pubblicato su HTML.it).

File richiesti per gli esempi

Come accennato nell'articolo Introduzione a MooTools, a differenza di altri framework, MooTools non obbliga a scaricare l'intera libreria, ma permette di scegliere i componenti richiesti per una determinata applicazione.

Gli esempi mostrati in questo articolo richiedono i seguenti file (che possono essere scaricati dalla pagina del download):

• Core.js, Class.js e Class.Extras.js;
• tutti i componenti della sezione Native (Array.js, Function.js, String.js, Element.js, Number.js);
• Element.Event.js della sezione Element;
• window.size.js della sezione Window;
• Tips.js della sezione Plugins.

Primo esempio

I tooltips vengono creati utilizzando il costruttore Tips. Esso accetta due parametri:

• una collezione di elementi alla quale applicare i tooltips (selezionata con la funzione $$);
• un oggetto che rappresenta le opzioni del tooltip.

Una caratteristica fondamentale dei tooltips creati con MooTools che può trarre in errore è l'opzione denominata 'className'. Essa non si riferisce al nome della classe dell'elemento su cui si vuole fare apparire il tooltip, ma è un prefisso che viene aggiunto al nome delle classi CSS che compongono il tooltip.

Esso infatti è composto da tre sezioni:

• il tool-title (che è il titolo del tooltip);
• il tool-tip (che è il corpo del tooltip);
• il tool-text (che è il testo del tooltip).

Se l'opzione className è impostata al valore 'tool1', allora, le sezioni del tooltip avranno i seguenti valori per gli attributi class:

• tool-title: 'tool1-title';
• tool-tip: 'tool1-tip';
• tool-text: 'tool1-text'.

Il prefisso di default è 'tool', ma vi consiglio di modificarlo sempre per non sovrapporre i valori delle classi.

Altri articoli

Altre guide

Altre newsletter