Cara Membuat Balloon Tooltip
Balloon Tooltip adalah sebuah Tips yang dapat ditampilkan dalam bentuk balon saat onmouseover diatas Link atau gambar. Balloon Tooltip ini pada dasarnya menggunakan 3 buah gambar, yang terlebih dahulu anda tempatkan dalam subfolder sama.
Cara Memasang Balloon Tooltip
- Langkah Pertama
CSS Balloon Tooltip
<style type="text/css">
#bubble_tooltip{
width:147px;
position:absolute;
display:none;
}
#bubble_tooltip .bubble_top{
background-image: url('https://sites.google.com/site/archivesiugi/javascr/bubble_top.gif');
background-repeat:no-repeat;
height:16px;
}
#bubble_tooltip .bubble_middle{
background-image: url('https://sites.google.com/site/archivesiugi/javascr/bubble_middle.gif');
background-repeat:repeat-y;
background-position:bottom left;
padding-left:7px;
padding-right:7px;
}
#bubble_tooltip .bubble_middle span{
position:relative;
top:-8px;
font-family: Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif;
font-size:11px;
}
#bubble_tooltip .bubble_bottom{
background-image: url('https://sites.google.com/site/archivesiugi/javascr/bubble_bottom.gif');
background-repeat:no-repeat;
background-repeat:no-repeat;
height:44px;
position:relative;
top:-6px;
}
</style>
Javascript Balloon Tooltip
<script type='text/javascript'>
//<![CDATA[
function showToolTip(e,text){
if(document.all)e = event;
var obj = document.getElementById('bubble_tooltip');
var obj2 = document.getElementById('bubble_tooltip_content');
obj2.innerHTML = text;
obj.style.display = 'block';
var st = Math.max(document.body.scrollTop,document.documentElement.scrollTop);
if(navigator.userAgent.toLowerCase().indexOf('safari')>=0)st=0;
var leftPos = e.clientX - 100;
if(leftPos<0)leftPos = 0;
obj.style.left = leftPos + 'px';
obj.style.top = e.clientY - obj.offsetHeight -1 + st + 'px';
}
function hideToolTip()
{
document.getElementById('bubble_tooltip').style.display = 'none';
}
//]]></script>
- Langkah Kedua
Untuk membuat Balloon Tooltip pada sebuah Link atau Text, silahkan anda gunakan tag seperti berikut ini:
<a href="#" onmousemove="showToolTip(event,'Ini adalah isi Tooltip');return false" onmouseout="hideToolTip()">Link atau Text</a>
Anda tidah harus menggunakan tag <a> jika anda tidak menginginkannya dan anda dapat menggunakan tag <span> sebagai gantinya. Contoh:
<span class="tooltip_text" href="#" onmousemove="showToolTip(event,'Ini adalah isi Tooltip');return false" onmouseout="hideToolTip()">Link atau Text</span>
- Langkah Terakhir
<div id="bubble_tooltip">
<div class="bubble_top"><span></span></div>
<div class="bubble_middle"><span id="bubble_tooltip_content"></span></div>
<div class="bubble_bottom"></div>
</div>
<div class="bubble_top"><span></span></div>
<div class="bubble_middle"><span id="bubble_tooltip_content"></span></div>
<div class="bubble_bottom"></div>
</div>
sumber: dhtmlgoodies
0 komentar:
Post a Comment
Catatan :
Untuk menyisipkan gambar kedalam komentar, gunakan tag : [img]URL_Gambar[/img]
atau <i rel="image">URL_Gambar</i>
Untuk Video Youtube : [youtube]URL_Video[/youtube]
atau <i rel="youtube">URL_Video</i>
Untuk "Kutipan", gunakan : [blockquote]Kutipan_Anda[/blockquote]
atau <b rel="quote">Kutipan_Anda</b>
Untuk menyisipkan Kode: [code]KODE[/code]
atau <i rel="code">KODE</i>
atau <i rel="pre">KODE</i>
Dan untuk menyisipkan smiles/ emoticon, lihat kode Emoticon