JavaScript  »  Articoli  »  Effetti e controlli Javascript 

A distanza di quasi due anni ho pensato fosse il tempo di rispolverare una delle tecniche che più mi ha divertito preparare, ovvero i Tooltip con Javascript e CSS. Per dare un seguito all'articolo era necessario aggiungere qualcosa di nuovo e accattivante, una maggiore compatibilità e facilità d'uso. Ecco così la nuova versione, di cui vediamo subito l'esempio. Se avete Javascript abilitato, il risultato dovrebbe essere questo:

Figura 1. Screenshot dei tooltip

Lo spunto e la grafica per i tooltip a forma di baloon viene da questo esempio dell'articolo su " title="Link interno">grafica per blog con i CSS. Nel corso dell'articolo vedremo come sia possibile abilitarli e personalizzarli. Cominciamo subito.

Come funzionano i bubbletooltips

I bubble tooltip sono una combinazione di Javascript e CSS per ottenere tooltip grafici facilmente personalizzabili. Al caricamento della pagina, se Javascipt è abilitato e il browser supporta il DOM, lo script procede con reperire tutti i link (o solo quelli di una determinata sezione) e in particolare il loro titolo e il loro url.

Al passaggio del mouse viene costruita una piccola struttura nel DOM che contiene queste due preziose informazioni. La presentazione del tooltip è compito del CSS, mentre l'attivazione è compito esclusivo di Javascript, a differenza della prima versione. Vediamo ora come sia possibile aggiungerli a una qualsiasi pagina.

Aggiungere i tooltip ad una qualsiasi pagina

I tooltip si compongono essenzialmente di quattro parti:

• un piccolo file Javascript di circa due Kb;
• un file CSS per la loro presentazione;
• un'immagine gif per la grafica dei tooltip;
• quattro righe nella sezione head della pagina per aggiungere lo script.

In quanto ai file Javascript e CSS e all'immagine, basterà copiarli nella stessa cartella della pagina HTML. Le righe da aggiungere nella sezione head della pagina sono le seguenti:

<script type="text/javascript" src="BubbleTooltips.js"></script>
<script type="text/javascript">
window.onload=function(){enableTooltips()};
</script>

C'è da evidenziare il fatto che il file CSS non ha bisogno di essere specificato nella sezione head della pagina, ma viene aggiunto da Javascript solo nel caso in cui quest'ultimo possa girare. Come vedremo in seguito è possibile personalizzare il CSS: l'importante è mantenerne il nome originale, ovvero bt.css. Per il resto la configurazione di base è decisamente molto semplice, e non necessita di particolari conoscenze di Javascript o CSS.

Altri articoli

Altre guide

Altre newsletter