Cara buat tooltip terbang

Tooltips! Ah ..., aku sungguh sangat menyukai ini. Sebuah desain yang tidak saja bermanfaat bagi pengunjung, akan tetapi dia juga merupakan sebuah "barang berharga" yang mampu membuat sebuah blog terlihat lebih cantik, lebih keren serta mampu mencerminkan sebuah kesungguhan dalam "pribadi pengelola blog". Maaf..., itu hanya penilaian subyektif dari aku. Yang jelas bahwa toolttip memang menambah "gaya" dan penampilan. "Rasa suka" akan tooltip ini membuat aku mencoba menuangkannya dalam beberapa posting. Yah ..., moga-moga saja memberi manfaat bagi para sobat blogger. Hanya perlu aku sampaikan bahwa posting "javascript tooltip-4" yang sudah aku terbitkan beberapa bulan yang lalu "tidak diperuntukkan bagi blogspot". E ..., barangkali saja ada yang ngeblog di luar blogspot dan tertarik untuk menggunakannya. O..., ya..., sebagai pelengkap koleksi tooltip, aku punya sebuah tooltip yang sangat menarik yang pada saat ini juga masih aku gunakan (23-Okt-10), mungkin sampeyan tertarik untuk memanfaatkan sebagai pelengkap blog. Silahkan coba untuk dibuat.

Kode CSS ZigZagLap Tooltip

.tooltip {
        display:none;
        background:#333 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQRm1bMbhXfuAFk4asThv0GAgPqUfzUMvVCq4aA00zVgv85Fo2VxxcnhvqiAjyCL4Is9Ex9h84GKLF2-gebV5uqf9JmAk4x3M5Ypjbw87wT9kzMlrsD5tjwczEKlrLiUt_ngRWaps6efo/s200/gubhugreyot.jpg) right bottom no-repeat;
        background-position:96% 93%;
        width:250px;
        font-family:Arial;
        font-size:13px;
        padding:10px 10px 20px;
        color: #00CCFF; 
        text-shadow:1px 1px 1px #000;
        border: 4px solid #555;
        border-radius:10px;
       -moz-border-radius:10px;
       -webkit-border-radius:10px; 
        box-shadow:0px 5px 20px rgba(125,124,250,.9);
       -moz-box-shadow:0px 5px 20px rgba(125,124,250,.9);
       -webkit-box-shadow:0px 5px 20px rgba(125,124,250,.9); 
} 
#jqtips img {
        border:0;
        cursor:pointer;
        margin:0 8px;
}

Javascript ZigZagLap Tooltip

<script src='http://gubhugreyot-javascript.googlecode.com/files/GRzigzaglaptooltip.js' type='text/javascript'/>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
(function(f){function p(a,b,c){var h=c.relative?a.position().top:a.offset().top,e=c.relative?a.position().left:a.offset().left,i=c.position[0];h-=b.outerHeight()-c.offset[0];e+=a.outerWidth()+c.offset[1];var j=b.outerHeight()+a.outerHeight();if(i=="center")h+=j/2;if(i=="bottom")h+=j;i=c.position[1];a=b.outerWidth()+a.outerWidth();if(i=="center")e-=a/2;if(i=="left")e-=a;return{top:h,left:e}}function t(a,b){var c=this,h=a.add(c),e,i=0,j=0,m=a.attr("title"),q=n[b.effect],k,r=a.is(":input"),u=r&&a.is(":checkbox, :radio, select, :button, :submit"), s=a.attr("type"),l=b.events[s]||b.events[r?u?"widget":"input":"def"];if(!q)throw'Nonexistent effect "'+b.effect+'"';l=l.split(/,\s*/);if(l.length!=2)throw"Tooltip: bad events configuration for "+s;a.bind(l[0],function(d){clearTimeout(i);if(b.predelay)j=setTimeout(function(){c.show(d)},b.predelay);else c.show(d)}).bind(l[1],function(d){clearTimeout(j);if(b.delay)i=setTimeout(function(){c.hide(d)},b.delay);else c.hide(d)});if(m&&b.cancelDefault){a.removeAttr("title");a.data("title",m)}f.extend(c,{show:function(d){if(!e){if(m)e=f(b.layout).addClass(b.tipClass).appendTo(document.body).hide().append(m);else if(b.tip)e=f(b.tip).eq(0);else{e=a.next();e.length||(e=a.parent().next())}if(!e.length)throw"Cannot find tooltip for "+a;}if(c.isShown())return c;e.stop(true,true);var g=p(a,e,b);d=d||f.Event();d.type="onBeforeShow";h.trigger(d,[g]);if(d.isDefaultPrevented())return c;g=p(a,e,b);e.css({position:"absolute",top:g.top,left:g.left});k=true;q[0].call(c,function(){d.type="onShow";k="full";h.trigger(d)});g=b.events.tooltip.split(/,\s*/); e.bind(g[0],function(){clearTimeout(i);clearTimeout(j)});g[1]&&!a.is("input:not(:checkbox, :radio), textarea")&&e.bind(g[1],function(o){o.relatedTarget!=a[0]&&a.trigger(l[1].split(" ")[0])});return c},hide:function(d){if(!e||!c.isShown())return c;d=d||f.Event();d.type="onBeforeHide";h.trigger(d);if(!d.isDefaultPrevented()){k=false;n[b.effect][1].call(c,function(){d.type="onHide";k=false;h.trigger(d)});return c}},isShown:function(d){return d?k=="full":k},getConf:function(){return b},getTip:function(){return e}, getTrigger:function(){return a}});f.each("onHide,onBeforeShow,onShow,onBeforeHide".split(","),function(d,g){f.isFunction(b[g])&&f(c).bind(g,b[g]);c[g]=function(o){f(c).bind(g,o);return c}})}f.tools=f.tools||{version:"1.2.3"};f.tools.tooltip={conf:{effect:"toggle",fadeOutSpeed:"fast",predelay:0,delay:30,opacity:1,tip:0,position:["top","center"],offset:[0,0],relative:false,cancelDefault:true,events:{def:"mouseenter,mouseleave",input:"focus,blur",widget:"focus mouseenter,blur mouseleave",tooltip:"mouseenter,mouseleave"}, layout:"<div/>",tipClass:"tooltip"},addEffect:function(a,b,c){n[a]=[b,c]}};var n={toggle:[function(a){var b=this.getConf(),c=this.getTip();b=b.opacity;b<1&&c.css({opacity:b});c.show();a.call()},function(a){this.getTip().hide();a.call()}],fade:[function(a){var b=this.getConf();this.getTip().fadeTo(b.fadeInSpeed,b.opacity,a)},function(a){this.getTip().fadeOut(this.getConf().fadeOutSpeed,a)}]};f.fn.tooltip=function(a){var b=this.data("tooltip");if(b)return b;a=f.extend(true,{},f.tools.tooltip.conf,a);if(typeof a.position=="string")a.position=a.position.split(/,?\s/);this.each(function(){b=new t(f(this),a);f(this).data("tooltip",b)});return a.api?b:this}})(jQuery);(function(d){var i=d.tools.tooltip;d.extend(i.conf,{direction:"up",bounce:true,slideOffset:10,slideInSpeed:800,slideOutSpeed:800,slideFade:!d.browser.msie}); var e={up:["-","top"],down:["+","top"],left:["-","left"],right:["+","left"]};i.addEffect("slide",function(g){var a=this.getConf(),f=a.slideOffset, b=a.slideFade?{opacity:0}:{},c=e[a.direction]||e.up,h=""+c[0];if(a.bounce)h=h=="+"?"-":"+";b[c[1]]=h+"="+f;this.getTip().animate(b,a.slideOutSpeed,function(){d(this).hide();g.call()})})})(jQuery); $.easing.bouncy = function (x, t, b, c, d) {var s = 1.70158;if ((t/=d/2) < 1) return c/2*(t*t*(((s*=(1.525))+1)*t - s)) + b;return c/2*((t-=2)*t*(((s*=(1.525))+1)*t + s) + 2) + b;}
$.tools.tooltip.addEffect("bouncy", function(done) {this.getTip().animate({left: '+=155'}, 500, 'bouncy', done).show();},function(done) {this.getTip().animate({top: '-=355'}, 1000, 'bouncy', function() {$(this).hide();done.call();});});
//]]>
</script>

Cara Membuat ZigZagLap Tooltip

• Login to Blogger
• Dashboard
• KLIK link "Design/Rancangan".
• KLIK "Edit HTML".
• Cari kode ]]></b:skin>. Gunakan Ctrl+F untuk mencari kode tersebut (letaknya di atas </head> atau <body>). Tutorial tentang Cara Cepat Cari Kode HTML di Template dapat dibaca dengan membuka Special Tutorials (menu sebelah kiri).
• Copy dan pastekan kode CSS di atasnya.
• Download Javascript. Akan lebih sempurna jika javascript tersebut kemudian di upload di file hosting (ripway.com, stashbox.org, yourjavascript.com atau yang lain).
• Simpan Javascript di atas tag pembuka <head> (terletak di ujung atas Edit Templates) dalam bentuk seperti di bawah ini:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script> <script src="http://h1.ripway.com/.../Javascript/zigzagLap.js" type="text/javascript"></script> <head>
Atau dalam bentuk seperti di bawah ini jika javascript tidak di upload:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script> <script type="text/javascript"> Letakkan di sini javascript hasil download! </script> <head>
• Copy dan simpan javascript berikut di atas tag penutup </body>.
<script type="text/javascript"> $("#jqtips a[title]").tooltip({effect: 'bouncy'}); $("#jqtips img[title]").tooltip({effect: 'bouncy'}); </script> </body>
• KLIK SAVE Templates/Simpan Template.

Cara Menggunakan Kode tooltip

Tooltip akan bekerja dengan memanfaatkan title yang berada dalam "tag a" atau "tag img". Sampeyan tak perlu menambahkan terlalu banyak kode lain. Satu kode tambahan yang di butuhkan adalah "tag DIV" yang menjadi wadah bagi "tag a" ataupun "tag img". Tooltip cantik ini bisa bekerja dengan baik di semua bagian blog, seperti di sidebar ataupun dalam posting. Cara menuliskan kodenya sebagai berikut:

Dalam tag a (link berbentuk teks dan gambar):

<div id="jqtips">
<a href="URL" title="Tuliskan teks tooltip di sini!">Teks Link</a>
</div>

<div id="jqtips">
<a href="URL" title="Tuliskan teks tooltip di sini!"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDe5n8pZrhPS8XGL4zn9B6GO1zHQx8U9d79jJD-Wfd59mzs5ZXRMKLfrJaPEAPY9xYNg3PsRUuzQd3UwaRaISK8M70tyM4hAusHCQ9DThBheU0ehnhRoomFavrlOdO6xgYh93xY7FmDu0/s220/36_2_34.gif" width=".." height=".." /></a>
</div>

Dalam tag img:

<div id="jqtips">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDe5n8pZrhPS8XGL4zn9B6GO1zHQx8U9d79jJD-Wfd59mzs5ZXRMKLfrJaPEAPY9xYNg3PsRUuzQd3UwaRaISK8M70tyM4hAusHCQ9DThBheU0ehnhRoomFavrlOdO6xgYh93xY7FmDu0/s220/36_2_34.gif" width=".." height=".." title="Tuliskan teks tooltip di sini!" />
</div>

Selamat bekerja dan semoga blog sampeyan tambah gantheng, cakep, cantik, manis dsb .... dsb ....