Bubble tooltip fai da te

Ci sono diverse cose che riguardano i bubble tooltip che vorrei condividere qui sul blog: non si tratta di un aggiornamento, ma di una serie di tips e goodies per i lettori. Per prima cosa, ecco qui l'immagine che ho preparato prima ancora dell'esempio dell'articolo: è una gif che contiene otto balloon in colori differenti. Vi basterà  tagliare quello che più vi piace (le dimensioni dovrebbero essere 150x200 pixel), salvarlo con il nome di bt.gif, copiare l'immagine nella stessa cartella dello script, magari cambiare i colori di testo e link del CSS e il gioco è fatto.

Nei bubble tooltips la presentazione è interamente dedicata ai CSS...

..se per esempio non vi piace l'icona a forma di balloon, intervenendo sul CSS è possibile personalizzarlo. Ecco lo screenshot di una variante senza immagini:

Ecco qui il relativo CSS, che vi basterà  salvare con nome bt.css e copiare nella stessa cartella dello script:


.tooltip{width: 160px;margin: 15px 0 0 20px;
    font:lighter 11px/1.3 Arial,sans-serif;
    text-decoration:none;text-align:center;
    background: #85CD44;color: #333;border: 1px solid #629C33}

.tooltip span.top{padding: 5px}

.tooltip b.bottom{padding:2px;color: #FFF;
    background: #629C33}


Ovviamente potrete sbizzarrirvi con colore di sfondo, testo e bordi. Il terzo tip riguarda il Javascript: nell'articolo ho spiegato come ottenere i tooltip solo su una determinata sezione. Ma come fare
se si vogliono escludere i tooltip da una sezione? Semplice, basterà  abilitarli sulle altre. Per esempio il Javascript che andrà  incorporato nell'head della pagina
per escludere il footer, e quindi consentire i tooltip su header, navigazione e contenuti (supponendo che gli id delle rispettive sezioni siano header, navigation e footer) sarà  il seguente:


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


La variante è piuttosto semplice e non necessita di modifiche al CSS né al Javascript esterno. àˆ tutto per ora: buon divertimento!