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
articolo
come fare
se si vogliono escludere i tooltip da una sezione
head
per escludere il footer, e quindi consentire i tooltip su header, navigazione e contenuti (supponendo che gli id
<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!
