Pure Javascript Tooltips!

http://blog.kangrian.com

by Rian .N Herdian

HTML

<a href="#blablabla" title="Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla ">Text Anchor Link</a>

<img src="https://googledrive.com/host/0B7H_GQEvKCj1Rmh1blVLZV9fSlk/gambar/logo-kang-rian.png" title="( EFFECT Tool Tip nya sudah support di gambar! )"/>

JavaScript

(function() {
    var a = document.getElementsByTagName('a');
    var img = document.getElementsByTagName('img');
    var t = document.createElement('span');
        t.id = "tt";
        t.style.position = "absolute";
        t.style.zIndex = 999;
        t.style.backgroundColor = "#333";
        t.style.border = "3px solid #e5e5e5";
        t.style.borderRadius = "5px";
        t.style.font = "11px Verdana";
        t.style.textShadow = "1px 1px 1px #000;";
        t.style.padding = "10px 15px";
        t.style.color = "#fff";
        t.style.maxWidth = "400px";
        t.style.wordWrap = "break-word";
        t.style.display = "none";
    document.body.appendChild(t);
    var tooltip = document.getElementById('tt');
    function over(e) {
        tooltip.style.display = "block";
        tooltip.innerHTML = this.title;
        tooltip.style.top = (e.pageY + 25) + 'px';
        tooltip.style.left = e.pageX + 'px';
        this.setAttribute('original', this.title);
        this.title = "";
    }
    function out() {
        tooltip.innerHTML = "";
        tooltip.style.display = "none";
        this.title = this.getAttribute('original');
        this.removeAttribute('original');
    }
    for (var i = 0; i < a.length; i++) {
        if (a[i].title) {
            a[i].onmouseover = over;
            a[i].onmouseout = out;
        }
    }
    for (var i = 0; i < img.length; i++) {
        if (img[i].title) {
            img[i].onmouseover = over;
            img[i].onmouseout = out;
        }
    }
})();