Necessiti di un semplice tooltip ad effetto “baloon” da mettere sul tuo sito? Questo script jQuery fa al caso tuo.
Realizzare tooltip ad effetto può risultare talvolta un’operazione più complessa di quanto possa sembrare. Con l’avvento dei CSS3 sono nati molti metodi per realizzarli, in questo articolo vi mostro quella che secondo me è la via “più rapida e veloce”. Oltre ad essere rapido da implementare, il plugin che vi mostrerò si è rivelato anche estremamente personalizzabile e dalle feature davvero brillanti.
[button link=”http://projects.sebastianhelzle.net/jquery.smallipop/index.html” color=”blue” target=”blank” size=”large”]Progetto Tooltip[/button] [button link=”http://projects.sebastianhelzle.net/jquery.smallipop/pages/options.html” color=”blue” target=”blank” size=”large”]Opzioni[/button]
Configurazione e uso
Per prima cosa inserite questo codice CSS all’interno del vostro sito:
.smallipop-hint{display:none}#smallipop-tour-overlay{position:fixed;left:0;top:0;bottom:0;right:0}.smallipop-instance{position:absolute;display:none;top:0;left:0;background-color:#314b64;border:1px solid #0f161e;color:#d2dfe7;z-index:9999;max-width:400px}.smallipop-instance font{size:11px;family:arial}.smallipop-instance a{color:#98cbea}.smallipop-instance:before,.smallipop-instance:after{content:'';position:absolute;left:50%;height:0;width:0;pointer-events:none}.smallipop-instance:before{bottom:-20px;margin-left:-10px;border:10px solid transparent}.smallipop-instance:after{bottom:-24px;margin-left:-12px;border:12px solid transparent}.smallipop-align-left:before,.smallipop-align-left:after{margin-left:0;left:auto;right:20px}.smallipop-align-left:after{right:18px}.smallipop-align-right:before,.smallipop-align-right:after{margin-left:0;left:20px;right:auto}.smallipop-align-right:after{left:18px}.smallipop-bottom:before,.smallipop-bottom:after{bottom:auto;top:-20px}.smallipop-bottom:after{top:-24px}.smallipop-left:before,.smallipop-left:after,.smallipop-right:before,.smallipop-right:after{right:-16px;left:auto;top:50%;bottom:auto;border-width:8px;margin:-8px 0 0}.smallipop-left:after,.smallipop-right:after{right:-20px;border-width:10px;margin:-10px 0 0}.smallipop-right:before,.smallipop-right:after{left:-16px;right:auto}.smallipop-right:after{left:-20px}.smallipop-content{padding:10px}.smallipop-tour-content{padding:5px 0;min-width:150px}.smallipop-tour-footer{padding-top:5px;position:relative;overflow:hidden;*zoom:1}.smallipop-tour-progress{color:#bbb;text-align:center;position:absolute;left:50%;width:80px;margin-left:-40px;top:8px}.smallipop-tour-close-icon{position:absolute;right:-8px;top:-8px;width:16px;height:16px;padding-top:0px;font-size:11px;background:#555;color:#ccc;text-align:center;text-shadow:0 -1px 1px #666;text-decoration:none;-webkit-border-radius:8px;-moz-border-radius:8px;-ms-border-radius:8px;-o-border-radius:8px;border-radius:8px;-webkit-box-shadow:0 1px 3px rgba(0,0,0,0.3);-moz-box-shadow:0 1px 3px rgba(0,0,0,0.3);box-shadow:0 1px 3px rgba(0,0,0,0.3)}.smallipop-tour-close-icon:hover{text-decoration:none;background:#666;color:#fff}.smallipop-tour-prev,.smallipop-tour-next,.smallipop-tour-close{color:#ccc;display:block;padding:3px 4px 2px;line-height:1em;float:left;background:#203142;-webkit-border-radius:3px;-moz-border-radius:3px;-ms-border-radius:3px;-o-border-radius:3px;border-radius:3px;-webkit-box-shadow:0 1px 2px rgba(0,0,0,0.3);-moz-box-shadow:0 1px 2px rgba(0,0,0,0.3);box-shadow:0 1px 2px rgba(0,0,0,0.3)}.smallipop-tour-prev:hover,.smallipop-tour-next:hover,.smallipop-tour-close:hover{color:#fff;background:#293e53;text-decoration:none}.smallipop-tour-next,.smallipop-tour-close{float:right}.smallipop-theme-default{text-shadow:0 -1px 1px #0f161e;-webkit-box-shadow:0 2px 6px rgba(0,0,0,0.5);-moz-box-shadow:0 2px 6px rgba(0,0,0,0.5);box-shadow:0 2px 6px rgba(0,0,0,0.5);-webkit-border-radius:12px;-moz-border-radius:12px;-ms-border-radius:12px;-o-border-radius:12px;border-radius:12px;background:-webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, rgba(49,75,100,0.9)), color-stop(100%, rgba(26,38,52,0.9)));background:-webkit-linear-gradient(rgba(49,75,100,0.9),rgba(26,38,52,0.9));background:-moz-linear-gradient(rgba(49,75,100,0.9),rgba(26,38,52,0.9));background:-o-linear-gradient(rgba(49,75,100,0.9),rgba(26,38,52,0.9));background:linear-gradient(rgba(49,75,100,0.9),rgba(26,38,52,0.9));background:-webkit-gradient(radial, 50% -100px, 0, 50% -100px, 150, color-stop(66.66667%, rgba(49,75,100,0.9)), color-stop(86.66667%, rgba(33,50,66,0.9)), color-stop(100%, rgba(26,38,52,0.9)));background:-webkit-radial-gradient(50% -100px, circle contain, rgba(49,75,100,0.9) 100px,rgba(33,50,66,0.9) 130px,rgba(26,38,52,0.9) 150px);background:-moz-radial-gradient(50% -100px, circle contain, rgba(49,75,100,0.9) 100px,rgba(33,50,66,0.9) 130px,rgba(26,38,52,0.9) 150px);background:-o-radial-gradient(50% -100px, circle contain, rgba(49,75,100,0.9) 100px,rgba(33,50,66,0.9) 130px,rgba(26,38,52,0.9) 150px);background:radial-gradient(50% -100px, circle contain, rgba(49,75,100,0.9) 100px,rgba(33,50,66,0.9) 130px,rgba(26,38,52,0.9) 150px)}.smallipop-theme-default a{text-shadow:0 -1px 1px #0f161e}.smallipop-theme-default .smallipop-content{border-top:1px solid #586d82;-webkit-border-radius:12px;-moz-border-radius:12px;-ms-border-radius:12px;-o-border-radius:12px;border-radius:12px}.smallipop-theme-default:before{border-color:#1a2634 transparent transparent transparent}.smallipop-theme-default:after{border-color:#0f161e transparent transparent transparent}.smallipop-theme-default.smallipop-bottom:before{border-color:transparent transparent #1a2634 transparent}.smallipop-theme-default.smallipop-bottom:after{border-color:transparent transparent #0f161e transparent}.smallipop-theme-default.smallipop-left:before{border-color:transparent transparent transparent #1a2634}.smallipop-theme-default.smallipop-left:after{border-color:transparent transparent transparent #0f161e}.smallipop-theme-default.smallipop-right:before{border-color:transparent #1a2634 transparent transparent}.smallipop-theme-default.smallipop-right:after{border-color:transparent #0f161e transparent transparent}.cssgradients.rgba .smallipop-theme-default{background-color:transparent}.smallipop-theme-blue{background:transparent;color:#111;border:10px solid rgba(0,100,180,0.9);-webkit-box-shadow:0 2px 6px rgba(0,0,0,0.5);-moz-box-shadow:0 2px 6px rgba(0,0,0,0.5);box-shadow:0 2px 6px rgba(0,0,0,0.5);-webkit-border-radius:7px;-moz-border-radius:7px;-ms-border-radius:7px;-o-border-radius:7px;border-radius:7px}.smallipop-theme-blue a{color:#2276aa}.smallipop-theme-blue:after{bottom:-34px;border-color:rgba(0,100,180,0.9) transparent transparent transparent}.smallipop-theme-blue:before{display:none}.smallipop-theme-blue.smallipop-bottom:after{top:-34px;border-color:transparent transparent rgba(0,100,180,0.9) transparent}.smallipop-theme-blue.smallipop-left{right:-26px}.smallipop-theme-blue.smallipop-left:after{border-color:transparent transparent transparent rgba(0,100,180,0.9)}.smallipop-theme-blue.smallipop-right{left:-26px}.smallipop-theme-blue.smallipop-right:after{border-color:transparent rgba(0,100,180,0.9) transparent transparent}.smallipop-theme-blue .smallipop-content{border:0;background:#fcfcfc}.smallipop-theme-blue .smallipop-tour-progress{color:#777}.smallipop-theme-blue .smallipop-tour-prev,.smallipop-theme-blue .smallipop-tour-next,.smallipop-theme-blue .smallipop-tour-close{color:#222;background:#efefef}.smallipop-theme-blue .smallipop-tour-prev:hover,.smallipop-theme-blue .smallipop-tour-next:hover,.smallipop-theme-blue .smallipop-tour-close:hover{color:#111;background:#f7f7f7}.smallipop-theme-black{background-color:#222;border-color:#111;text-shadow:0 -1px 1px #111;color:#f5f5f5;-webkit-box-shadow:0 2px 6px rgba(0,0,0,0.5);-moz-box-shadow:0 2px 6px rgba(0,0,0,0.5);box-shadow:0 2px 6px rgba(0,0,0,0.5);background:-webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #333333), color-stop(100%, #222222));background:-webkit-linear-gradient(#333333,#222222);background:-moz-linear-gradient(#333333,#222222);background:-o-linear-gradient(#333333,#222222);background:linear-gradient(#333333,#222222);-webkit-border-radius:5px;-moz-border-radius:5px;-ms-border-radius:5px;-o-border-radius:5px;border-radius:5px}.smallipop-theme-black a{color:#eef8ff;text-shadow:0 -1px 1px #111}.smallipop-theme-black:before{border-color:#222 transparent transparent transparent}.smallipop-theme-black:after{border-color:#111 transparent transparent transparent}.smallipop-theme-black.smallipop-bottom:before{border-color:transparent transparent #222 transparent}.smallipop-theme-black.smallipop-bottom:after{border-color:transparent transparent #111 transparent}.smallipop-theme-black.smallipop-left:before{border-color:transparent transparent transparent #222}.smallipop-theme-black.smallipop-left:after{border-color:transparent transparent transparent #111}.smallipop-theme-black.smallipop-right:before{border-color:transparent #222 transparent transparent}.smallipop-theme-black.smallipop-right:after{border-color:transparent #111 transparent transparent}.smallipop-theme-black .smallipop-content{border-top:1px solid #666;-webkit-border-radius:5px;-moz-border-radius:5px;-ms-border-radius:5px;-o-border-radius:5px;border-radius:5px}.smallipop-theme-black .smallipop-tour-progress{color:#888}.smallipop-theme-black .smallipop-tour-prev,.smallipop-theme-black .smallipop-tour-next,.smallipop-theme-black .smallipop-tour-close{color:#ccc;background:#333}.smallipop-theme-black .smallipop-tour-prev:hover,.smallipop-theme-black .smallipop-tour-next:hover,.smallipop-theme-black .smallipop-tour-close:hover{color:#fff;background:#3a3a3a}.cssgradients .smallipop-theme-black{background-color:transparent}.smallipop-theme-orange{background-color:#f9aa18;border-color:#e17500;text-shadow:0 1px 1px #fff24d;color:#714900;background:-webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #fff24d), color-stop(100%, #f9aa18));background:-webkit-linear-gradient(#fff24d,#f9aa18);background:-moz-linear-gradient(#fff24d,#f9aa18);background:-o-linear-gradient(#fff24d,#f9aa18);background:linear-gradient(#fff24d,#f9aa18);-webkit-box-shadow:0 2px 6px rgba(0,0,0,0.5);-moz-box-shadow:0 2px 6px rgba(0,0,0,0.5);box-shadow:0 2px 6px rgba(0,0,0,0.5);-webkit-border-radius:10px;-moz-border-radius:10px;-ms-border-radius:10px;-o-border-radius:10px;border-radius:10px}.smallipop-theme-orange a{color:#145d95;text-shadow:0 1px 1px #fff24d}.smallipop-theme-orange:before{border-color:#f9aa18 transparent transparent transparent}.smallipop-theme-orange:after{border-color:#e17500 transparent transparent transparent}.smallipop-theme-orange.smallipop-bottom:before{border-color:transparent transparent #f9aa18 transparent}.smallipop-theme-orange.smallipop-bottom:after{border-color:transparent transparent #e17500 transparent}.smallipop-theme-orange.smallipop-left:before{border-color:transparent transparent transparent #f9aa18}.smallipop-theme-orange.smallipop-left:after{border-color:transparent transparent transparent #e17500}.smallipop-theme-orange.smallipop-right:before{border-color:transparent #f9aa18 transparent transparent}.smallipop-theme-orange.smallipop-right:after{border-color:transparent #e17500 transparent transparent}.smallipop-theme-orange .smallipop-content{border-top:1px solid #fffabc;-webkit-border-radius:10px;-moz-border-radius:10px;-ms-border-radius:10px;-o-border-radius:10px;border-radius:10px}.smallipop-theme-orange .smallipop-tour-progress{color:#444}.smallipop-theme-orange .smallipop-tour-prev,.smallipop-theme-orange .smallipop-tour-next,.smallipop-theme-orange .smallipop-tour-close{color:#444;background:#f19f06}.smallipop-theme-orange .smallipop-tour-prev:hover,.smallipop-theme-orange .smallipop-tour-next:hover,.smallipop-theme-orange .smallipop-tour-close:hover{color:#333;background:#f9a509}.smallipop-theme-white{background-color:#fcfcfc;border-color:#ccc;text-shadow:0 1px 1px #eee;color:#444;width:200px;max-width:200px;-webkit-box-shadow:0 1px 4px rgba(0,0,0,0.1);-moz-box-shadow:0 1px 4px rgba(0,0,0,0.1);box-shadow:0 1px 4px rgba(0,0,0,0.1);-webkit-border-radius:6px;-moz-border-radius:6px;-ms-border-radius:6px;-o-border-radius:6px;border-radius:6px}.smallipop-theme-white:before{border-color:#fcfcfc transparent transparent transparent}.smallipop-theme-white:after{border-color:#ccc transparent transparent transparent}.smallipop-theme-white.smallipop-bottom:before{border-color:transparent transparent #fcfcfc transparent}.smallipop-theme-white.smallipop-bottom:after{border-color:transparent transparent #ccc transparent}.smallipop-theme-white.smallipop-left:before{border-color:transparent transparent transparent #fcfcfc}.smallipop-theme-white.smallipop-left:after{border-color:transparent transparent transparent #ccc}.smallipop-theme-white.smallipop-right:before{border-color:transparent #fcfcfc transparent transparent}.smallipop-theme-white.smallipop-right:after{border-color:transparent #ccc transparent transparent}.smallipop-theme-white .smallipop-content{text-align:center;-webkit-border-radius:6px;-moz-border-radius:6px;-ms-border-radius:6px;-o-border-radius:6px;border-radius:6px}.smallipop-theme-white .smallipop-tour-progress{color:#777}.smallipop-theme-white .smallipop-tour-close-icon{background:#fafafa;color:#555;text-shadow:0 1px 1px #fff}.smallipop-theme-white .smallipop-tour-close-icon:hover{background:#f5f5f5;color:#222}.smallipop-theme-white .smallipop-tour-prev,.smallipop-theme-white .smallipop-tour-next,.smallipop-theme-white .smallipop-tour-close{color:#666;background:#f0f0f0}.smallipop-theme-white .smallipop-tour-prev:hover,.smallipop-theme-white .smallipop-tour-next:hover,.smallipop-theme-white .smallipop-tour-close:hover{color:#333;background:#f4f4f4}.smallipop-theme-white-transparent{background-color:rgba(255,255,255,0.8)}.smallipop-theme-white-transparent:before{bottom:-21px;border-color:rgba(255,255,255,0.8) transparent transparent transparent}.smallipop-theme-white-transparent:after{border-color:transparent}.smallipop-theme-white-transparent.sipAlignBottom:before{top:-21px;border-color:transparent transparent rgba(255,255,255,0.8) transparent}.smallipop-theme-white-transparent.sipPositionedLeft:before{border-color:transparent transparent transparent rgba(255,255,255,0.8)}.smallipop-theme-white-transparent.sipPositionedRight:before{border-color:transparent rgba(255,255,255,0.8) transparent transparent}.smallipop-instance.smallipop-theme-fat-shadow{-webkit-box-shadow:0 2px 20px rgba(0,0,0,0.8);-moz-box-shadow:0 2px 20px rgba(0,0,0,0.8);box-shadow:0 2px 20px rgba(0,0,0,0.8)}.smallipop-instance.smallipop-theme-wide{max-width:600px}
A questo punto collegate le librerie e inizializzate il plugin:
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script type="text/javascript" src="js/jquery.smallipop.min.js"></script>
<script type="text/javascript">
$('.tooltipcustom').smallipop({
popupOffset: 300,
popupYOffset: 30,
preferredPosition: 'right'
});
</script>
In questo esempio specifico faccio apparire il popup sulla destra con la possibilità di impostare un offset verticale e orizzontale. Per una lista completa delle opzioni vi rimando alla pagina ufficiale del plugin:
[button link=”http://projects.sebastianhelzle.net/jquery.smallipop/pages/options.html” color=”blue” target=”blank” size=”large”]Opzioni[/button]
Conclusioni
Come ho già accennato a inizio articolo il plugin si è rivelato molto utile, in particolar modo nella costruzione di questo palinsesto radio:
[button link=”http://www.italianstyleradio.it/palinsesto/” color=”blue” target=”blank” size=”large”]Demo palinsesto radio[/button]
Come sempre l’uso di piccoli accorgimenti come un semplice tooltip può fare la differenza per la vostra User Experience. Voi che ne pensate? Conoscete altre alternative utili per i vostri tooltip?
