bubble tooltip jquery blog

1. Login ke blogger
2. Pilih Rancangan
3. Pilih EDIT HTML (centang expand template widget)
4. Simpan CSS berikut diatas kode ]]></b:skin>

#easyTooltip{<br /> <br /> padding:5px;<br /> <br /> border:1px solid #000;<br /> <br /> color: #fff;<br /> <br /> background:#000;<br /> <br /> }

5. simpan script berikut diatas kode </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>

<!-- begin Tooltips --><br /> <script type='text/javascript'> $(document).ready(function(){ $("a.tooltip").easyTooltip(); }); </script><br /> <script type='text/javascript'> //<![CDATA[ (function($){$.fn.easyTooltip=function(options){var defaults={xOffset:20,yOffset:30,tooltipId:"easyTooltip",clickRemove:false,content:"",useElement:""};var options=$.extend(defaults,options);var content;this.each(function(){var title=$(this).attr("title");$(this).hover(function(e){content=(options.content!="")?options.content:title;content=(options.useElement!="")?$("#"+options.useElement).html():content;$(this).attr("title","");if(content!=""&&content!=undefined){$("body").append("<div id='"+options.tooltipId+"'>"+content+"</div>");$("#"+options.tooltipId).css("position","absolute").css("top",(e.pageY-options.yOffset)+"px").css("left",(e.pageX+options.xOffset)+"px").css("display","none").fadeIn("fast")}},function(){$("#"+options.tooltipId).remove();$(this).attr("title",title)});$(this).mousemove(function(e){$("#"+options.tooltipId).css("top",(e.pageY-options.yOffset)+"px").css("left",(e.pageX+options.xOffset)+"px")});if(options.clickRemove){$(this).mousedown(function(e){$("#"+options.tooltipId).remove();$(this).attr("title",title)})}})}})(jQuery); //]]> </script>

CATATAN :
perhatikan code berikut

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>

jika code tersebut sudah ada dalam templet anda, anda tidak usah menaruhnya lagi alias abaikan saja.

6. simpan templet.

untuk menggunakannya, silahkan anda menggunakan code berikut

<a class='tooltip' href="LINK URL"title='PESAN DALAM TOOLTIP'>TULISAN ANDA</a>