Tooltip efek zigzag ini keren banget dari tooltip - tooltip yang pernah ada mengapa di bilang zigzag..? karena efeknya itu zigzag jadi tooltip ini punya animasi dari arah kiri ke kanan, posting ini sebenarnya milik Gubhugreyot tapi aku posting lagi supaya kalau aku lupa bisa inget URL nya di postingan ini. jika penasaran bisa langsung lihat demonya.

DEMO

Setelah selesai lihat demonya sekarang membahas kodenya.

1. Copy kode di bawah ini di atas kode </body>

<script type="text/javascript">
$(".GRzigzag a[title]").myGRzigzagtips({effect: 'bouncy'});
$(".GRzigzag img[title]").myGRzigzagtips({effect: 'bouncy'});
</script>

2. Masukan kode javascript kedua ini di atas kode </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'></script>
<script src='http://sites.google.com/site/sin1ajablog/javascript/zigzaglap.js' type='text/javascript'></script>

3. Masukan kode css di bawah ini di atas kode ]]></b:skin>

.tooltip{
      display:none;
      background:#090;
      width:250px;
      font-family:Arial;
      font-size:13px;
      padding:10px 10px 20px;
      color: #CCC; 
      border: 2px solid #060;
    text-align:left;
} 
#jqtips img{
      border:0;
      cursor:pointer;
      margin:0 8px;
}

Cara Penggunaanya tooltip zigzag

1. Kode pada link

<div class="GRzigzag">
<a href="URL" title="Tuliskan teks tooltip di sini!">Judul Link</a>
</div>

2. Kode pada link gambar

<div class="GRzigzag">
<a href="URL" title="Tuliskan teks tooltip di sini!"><img src="url gambar" /></a>
</div>

3. Kode hanya gambar

<div class="GRzigzag">
<img src="url gambar" title="Tuliskan teks tooltip di sini!" />
</div>

4. Penggunaan pada area postingan

Kode ini juga bisa anda gunakan pada postingan anda jadi anda tidak capek - capek untuk menulis kode html terlalu banyak anda cukup beralih dari mode Compose ke Mode Edit HTML kalau belum tau baca caranya Disini

<div class="GRzigzag">

Disini isi dengan postingan anda dan menggunakan link <a href='url' title='disini tooltipnya'>Nama Link</a> atau <img src='url gambar' title='judul tooltip'/> dan bisa juga gambar menggunakan link <a href='url' title='judul tooltip'><img src='url gambar'/></a>

</div>

Nah saat postingan anda di apit dengan kode <div class="GRzigzag"> maka otomatis link atau gambar di dalamnya yang menggunakan attribut title akan langsung terkena efek tooltip zigzag ini gitu maksudnya.

Oh iya bagi yang ingin upload js nya di hostingan sendiri Copy kodenya di bawah ini.

/*//<![DATA[*/eval(function(p,a,c,k,e,r){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('(4(a){4 c(c,e){t f=6,g=c.2j(f),h,i=0,j=0,k=c.1v("17"),l=d[e.L],m,n=c.18(":W"),o=n&&c.18(":1w, :1x, 2k, :2l, :2m"),p=c.1v("M"),q=e.N[p]||e.N[n?o?"1y":"W":"1z"];5(!l){19\'2n L "\'+e.L+\'"\'}q=q.O(/,\\s*/);5(q.1a!=2){19"2o: 2p N 2q 1A "+p}c.C(q[0],4(a){X(i);5(e.1b){j=1B(4(){f.P(a)},e.1b)}Y{f.P(a)}}).C(q[1],4(a){X(j);5(e.1c){i=1B(4(){f.y(a)},e.1c)}Y{f.y(a)}});5(k&&e.1C){c.2r("17");c.1d("17",k)}a.1e(f,{P:4(d){5(!h){5(k){h=a(e.1D).2s(e.1E).2t(1F.2u).y().2v(k)}Y{5(e.1f){h=a(e.1f).2w(0)}Y{h=c.1G();h.1a||(h=c.2x().1G())}}5(!h.1a){19"2y 2z r 1A "+c}}5(f.1g()){7 f}h.Z(D,D);t n=b(c,h,e);d=d||a.1H();d.M="1I";g.Q(d,[n]);5(d.1J()){7 f}n=b(c,h,e);h.1K({v:"1L",8:n.8,u:n.u});m=D;l[0].E(f,4(){d.M="1M";m="1N";g.Q(d)});n=e.N.r.O(/,\\s*/);h.C(n[0],4(){X(i);X(j)});n[1]&&!c.18("W:2A(:1w, :1x), 2B")&&h.C(n[1],4(a){a.2C!=c[0]&&c.Q(q[1].O(" ")[0])});7 f},y:4(b){5(!h||!f.1g()){7 f}b=b||a.1H();b.M="1O";g.Q(b);5(!b.1J()){m=1h;d[e.L][1].E(f,4(){b.M="1P";m=1h;g.Q(b)});7 f}},1g:4(a){7 a?m=="1N":m},R:4(){7 e},w:4(){7 h},2D:4(){7 c}});a.1Q("1P,1I,1M,1O".O(","),4(b,c){a.2E(e[c])&&a(f).C(c,e[c]);f[c]=4(b){a(f).C(c,b);7 f}})}4 b(a,b,c){t d=c.11?a.v().8:a.S().8,e=c.11?a.v().u:a.S().u,f=c.v[0];d-=b.1i()-c.S[0];e+=a.1j()+c.S[1];t g=b.1i()+a.1i();5(f=="1k"){d+=g/2}5(f=="1l"){d+=g}f=c.v[1];a=b.1j()+a.1j();5(f=="1k"){e-=a/2}5(f=="u"){e-=a}7{8:d,u:e}}a.F=a.F||{2F:"1.2.3"};a.F.r={1m:{L:"1R",1S:"2G",1b:0,1c:30,T:1,1f:0,v:["8","1k"],S:[0,0],11:1h,1C:D,N:{1z:"1n,1o",W:"1T,1U",1y:"1T 1n,1U 1o",r:"1n,1o"},1D:"<2H/>",1E:"r"},1p:4(a,b,c){d[a]=[b,c]}};t d={1R:[4(a){t b=6.R(),c=6.w();b=b.T;b<1&&c.1K({T:b});c.P();a.E()},4(a){6.w().y();a.E()}],2I:[4(a){t b=6.R();6.w().2J(b.2K,b.T,a)},4(a){6.w().2L(6.R().1S,a)}]};a.2M.r=4(b){t d=6.1d("r");5(d){7 d}b=a.1e(D,{},a.F.r.1m,b);5(2N b.v=="2O"){b.v=b.v.O(/,?\\s/)}6.1Q(4(){d=2P c(a(6),b);a(6).1d("r",d)});7 b.2Q?d:6}})(1V);(4(a){t b=a.F.r;a.1e(b.1m,{1W:"1q",1X:D,1Y:10,2R:1Z,20:1Z,21:!a.2S.2T});t c={1q:["-","8"],2U:["+","8"],u:["-","u"],22:["+","u"]};b.1p("2V",4(b){t d=6.R(),e=d.1Y,f=d.21?{T:0}:{},g=c[d.1W]||c.1q,h=""+g[0];5(d.1X){h=h=="+"?"-":"+"}f[g[1]]=h+"="+e;6.w().1r(f,d.20,4(){a(6).y();b.E()})})})(1V);$.2W.12=4(a,b,c,d,e){t f=1.2X;5((b/=e/2)<1){7 d/2*b*b*(((f*=1.23)+1)*b-f)+c}7 d/2*((b-=2)*b*(((f*=1.23)+1)*b+f)+2)+c};$.F.r.1p("12",4(a){6.w().1r({u:"+=2Y"},2Z,"12",a).P()},4(a){6.w().1r({8:"-=31"},32,"12",4(){$(6).y();a.E()})});1F.33("<24>.r{v:11;25:34;z:#x;z:-35-G-A(8,#x 1%,#H I%,#B J%);z:-26-A(G,u 8,u 1l, U-Z(1%,#x),U-Z(I%,#H), U-Z(J%,#B));z:-26-G-A(8,#x 1%,#H I%,#B J%);z:-o-G-A(8,#x 1%,#H I%,#B J%);z:-36-G-A(8,#x 1%,#H I%,#B J%);z:G-A(8,#x 1%,#H I%,#B J%);37:38:39.3a.A(3b=\'#x\',3c=\'#B\',3d=0);3e:3f;V-27:28;V-1s:3g;3h:13 13 29;U:#3i; 1t-14:K K K #1u;15: 3j 3k #3l;15-3m:13; 3n-14:3o 3p 29 3q(3r,3s,3t,.9);1t-14:16 16 16 #1u;}.r:2a{v:1L;1l:16;22:3u;25:3v;V-1s:3w;V-27:28;U:#3x;2b:\'2c\';1t-14:K K K #1u;}#2d 2e{15:0;2f:2g;2h:0 2i;}.r:3y:2a{V-1s:13;2b:\'3z://2c.3A.3B\';}#2d 2e{15:0;2f:2g;2h:0 2i;</24>")',62,224,'||||function|if|this|return|top|||||||||||||||||||myGRzigzagtips||var|left|position|getTip|7d7e7d|hide|background|gradient|565656|bind|true|call|tools|linear|0e0e0e|55|100|1px|effect|type|events|split|show|trigger|getConf|offset|opacity|color|font|input|clearTimeout|else|stop||relative|bouncy|10px|shadow|border|2px|title|is|throw|length|predelay|delay|data|extend|tip|isShown|false|outerHeight|outerWidth|center|bottom|conf|mouseenter|mouseleave|addEffect|up|animate|size|text|000|attr|checkbox|radio|widget|def|for|setTimeout|cancelDefault|layout|tipClass|document|next|Event|onBeforeShow|isDefaultPrevented|css|absolute|onShow|full|onBeforeHide|onHide|each|toggle|fadeOutSpeed|focus|blur|jQuery|direction|bounce|slideOffset|800|slideOutSpeed|slideFade|right|525|style|display|webkit|family|Arial|20px|after|content|gubhugreyot|GRzigzag|img|cursor|pointer|margin|8px|add|select|button|submit|Nonexistent|Tooltip|bad|configuration|removeAttr|addClass|appendTo|body|append|eq|parent|Cannot|find|not|textarea|relatedTarget|getTrigger|isFunction|version|fast|div|fade|fadeTo|fadeInSpeed|fadeOut|fn|typeof|string|new|api|slideInSpeed|browser|msie|down|slide|easing|70158|155|500||355|1e3|write|none|moz|ms|filter|progid|DXImageTransform|Microsoft|startColorstr|endColorstr|GradientType|width|220px|12px|padding|00CCFF|4px|solid|555|radius|box|0px|5px|rgba|125|124|250|6px|block|9px|bbb|hover|http|blogspot|com'.split('|'),0,{}))/*//]]>*//* http://gubhugreyot.blogspot.com */