Cara Membuat dan Memasang Javascript Tooltip-2 : Display image in tooltip !

Javascript Tooltip-1 berbeda dengan CSS tooltip sebelumnya yang memfungsikan hover untuk menghasilkan tooltip. Dengan javascript ini, tooltip dimunculkan melalui "title" pada link yang kita gunakan. Tentu saja CSS masih juga diperlukan untuk pengaturan beberapa fungsi, seperti posisi (padding dan margin), warna, background, serta jenis, tebal dan ukuran teks/font.

Kode CSS :

.tip{
        font:12px Arial; 
        border:solid 2px #999; 
        width:220px; 
        padding:8px;
        position:absolute; 
        z-index:100;
        visibility:hidden; 
        color: #FFFFCC; 
        background:#000 url(https://lh3.googleusercontent.com/-3M5IcdYHokI/T3E0p4POHwI/AAAAAAAAAjA/E-qituUeEKM/h400/grad-blacktoblue-1x400.png) bottom repeat-x;
        border-radius:15px;
} 
.tip b{
        font-size:12px;
        font-family:Verdana;
        font-weight:bold;
        color:#ccc;
        border-bottom:1px dotted #999;
} 
.tip img.small{
        width:60px;
        height:auto;
        border:1px solid #FFFF99;
        padding:2px;
        background:#fff;
        display:block;
        float:left;
        margin:8px 8px 8px 0;
}
.tip img.big{
        width:215px;
        height:auto;
        border:1px solid #FFFF99;
        padding:2px;
        background:#fff;
        display:block;
        float:left;
        margin:8px 8px 8px 0;
}
.tip p{
        margin:8px 0 0 0;
}

Javascript :

<script type="text/javascript">
//<![CDATA[
function pw() {
    return window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth
};
function mouseX(evt) {
    return evt.clientX ? evt.clientX + (
    document.documentElement.scrollLeft || document.body.scrollLeft) : evt.pageX;
}
function mouseY(evt) {
    return evt.clientY ? evt.clientY + (
    document.documentElement.scrollTop || document.body.scrollTop) : evt.pageY
}
function popUp(evt, oi) {
    if (document.getElementById) {
        var wp = pw();
        dm = document.getElementById(oi);
        ds = dm.style;
        st = ds.visibility;
        if (dm.offsetWidth) ew = dm.offsetWidth;
        else if (dm.clip.width) ew = dm.clip.width;
        if (st == "visible" || st == "show") {
            ds.visibility = "hidden";
        }
        else {
            tv = mouseY(evt) + 20;
            lv = mouseX(evt) - (ew / 4);
            if (lv < 2) lv = 2;
            else if (lv + ew > wp) lv -= ew / 2;
            lv += 'px';
            tv += 'px';
            ds.left = lv;
            ds.top = tv;
            ds.visibility = "visible";
        }
    }
}
//]]>
</script>

xHTML-1 :

<div id="tips1" class="tip"><b>Title</b><img class="small" src="https://lh6.googleusercontent.com/-DkmvIFciapU/T14I_KL_M2I/AAAAAAAAAWo/xuwBkTtzsGQ/s128/gubhugreyot_cwk-01.jpg"/><p>Tuliskan teks tooltips di sini !</p></div><a href="URL" onmouseout="popUp(event,'tips1')" onmouseover="popUp(event,'tips1')" target="_blank">Link title-1</a>

xHTML-2 :

<div id="tips2" class="tip"><b>Title</b><img class="big" src="https://lh3.googleusercontent.com/-SlUER4FroYw/T14nvhK2r6I/AAAAAAAAAXQ/tcjQB1jAdQk/s128/gubhugreyot_jaran-goyang.jpg"/><p>Tuliskan teks tooltip di sini !</p></div><a href="URL" onmouseout="popUp(event,'tips2')" onmouseover="popUp(event,'tips2')" target="_blank">Link-title-2</a>

xHTML-3 :

<div id="tips3" class="tip">
<table align="center" width="210" border="0" cellspacing="0" cellpadding="5" bgcolor="#008cff">
<tr>
<td valign="bottom" align="center"> 
<img src="https://lh5.googleusercontent.com/-GkzCLx_FMIE/T14JCKL2c2I/AAAAAAAAAXA/hmebmZZKYOY/s128/gubhugreyot_cwk-05.jpg" width="210" height="120" border="0" alt="" /></td></tr><tr><td valign="bottom" align="center">Link Title-3
</td>
</tr>
</table>
</div>

xHTML-4 :

<a href="URL" onmouseout="popUp(event,'tips3')" onmouseover="popUp(event,'tips3')" target="_blank">Link Title-4</a>

xHTML-5 :

<div id="tips4" class="tip" style="background:#000; width:240px;"><b>Judul Tooltip !</b><p>Tuliskan teks tooltip di sini !</p></div><a href="URL" onmouseout="popUp(event,'tips4')" onmouseover="popUp(event,'tips4')" target="_blank">Link Title-5</a>

xHTML-6 :

<div id="tips5" class="tip" style="background:#555;"><b>Judul Tooltip !</b><p>Tuliskan teks tooltip di sini !</p></div><a href="URL" onmouseout="popUp(event,'tips5')" onmouseover="popUp(event,'tips5')" target="_blank">Link Title-6</a>

1. Simpan kode CSS dan javascript di antara tag <head> dan tag </head>
2. Beberapa xHTML di atas berfungsi untuk membuat berbagai tooltip.