Nah ... untuk topik ini tooltipnya menggunakan script yang lumayan agak panjang. Untuk contoh gambar kalian bisa melihat pada gambar dibawah ini:
Untuk LIVE DEMO silahkan kalian Klik Button DEMO dibawah ini :
untuk membuat tooltip ini silahkan ikuti langkah-langkah pembuatannya di bawah ini:
1. Login ke blogger kalian
2. Pilih Rancangan
3. Pilih EDIT HTML (centang expand template widget)
4. Simpan CSS berikut diatas kode ]]></b:skin>
#easyTooltip{
padding:5px;
border:1px solid #000;
color: #fff;
background:#000;
}
Keterangan
- Padding:5px : Jarak tootltip, bisa dirubah jika kalian mau
- border: 1px solid #000 ---> Garis pada tooltip dengan ketebalan 1 px jenis solid dan warna Hitam (#000), kalian bisa merubah warna ketebalan dan jenis garisnya.
- Color: #fff ---> Warna huruf atau tulisan berwarna putih
- Background:#000 ---> Warna latar berlakang atau background tooltipnya
5. Sekarang 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 -->
<script type='text/javascript'>
$(document).ready(function(){
$("a.tooltip").easyTooltip();
});
</script>
<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 kode berikut :
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
Jika kode tersebut sudah ada pada template kalian maka abaikan saja alias tidak usah dipakai.
6. Simpan Template kalian
Untuk menggunakannya silahkan kalian gunakan kode berikut:
<a class='tooltip' href="LINK URL"title='PESAN DALAM TOOLTIP'>TULISAN KALIAN</a>
Selesai dan semoga bermanfaat...
Resensi :
CSS Globe | http://cssglobe.com/post/1695/easiest-tooltip-and-image-preview-using-jquery
CSS Globe | http://cssglobe.com/post/1695/easiest-tooltip-and-image-preview-using-jquery