Sunday, July 29, 2012

Tooltip Kustom Otomatis untuk Semua Tautan

<script>
//<![CDATA[
// Pure JavaScript Nested Tooltip Replacement for all Anchor Tag
// https://plus.google.com/108949996304093815163/about
(function() {

    var a = document.getElementsByTagName('a');
    var t = document.createElement('span');
        t.id = "tt";
        t.style.position = "absolute";
        t.style.zIndex = 999;
        t.style.backgroundColor = "#FFE13F";
        t.style.border = "1px solid #BC5F05";
        t.style.font = "bold 11px Tahoma,Arial,Sans-Serif";
        t.style.boxShadow = "0 1px 3px rgba(0,0,0,0.4)";
        t.style.padding = "5px 10px";
        t.style.color = "#000";
        t.style.maxWidth = "170px";
        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;
        }
    }

})();
//]]>
</script>

Salin kodenya dan letakkan di atas tag </body>

Demo

Labels: , ,

30 Comments:

At Sunday, July 29, 2012 at 2:38:00 PM GMT+7, Blogger Surga Kenari said...

keren :3

 
At Sunday, July 29, 2012 at 4:04:00 PM GMT+7, Blogger MUX SPARROW said...

Begitu liat postingan ini.. refleks ane bedoa moga Allah muliakan dunia-akhiratmu, MasBro.. aammiiin. :-bd 0:)

 
At Sunday, July 29, 2012 at 4:43:00 PM GMT+7, Blogger Taufik Nurrohman said...

Ada suka ada duka :\

 
At Sunday, July 29, 2012 at 10:25:00 PM GMT+7, Anonymous Anonymous said...

apa bedanya sama tooltip yang sebelum2nya mas??

 
At Monday, July 30, 2012 at 12:14:00 PM GMT+7, Blogger Taufik Nurrohman said...

Bedanya, yang ini sangat ringan karena tidak memerlukan library seperti JQuery atau MooTools. Intinya sih, ini cuma sebagai alternatif untuk pemilik website yang tidak dilengkapi dengan JQuery (sebagai contoh). Kelemahanya memang, hasilnya tidak sesempurna tooltip yang berada di bawah JavaScript Library.

Terkait: MyTooltip JQuery Plugin

 
At Monday, July 30, 2012 at 9:33:00 PM GMT+7, Blogger MUX SPARROW said...

gapapa, Mas.. emang tabiat alam dunia 'kan gitu: tempat bertukarnya senang-susah;suka-duka;siang-malam, insyaAllah hamba Allah tetap dapat Raahiim-Nya. :)

btw, ane sebelumnya udah pake yang mytooltip.. tar coba dikolaborasi dikit ah.. :) makasih Mas Taufik, moga ibadah ramadhannya lancar yahh.. :D

 
At Monday, July 30, 2012 at 10:46:00 PM GMT+7, Blogger marco said...

Amiin...

 
At Monday, July 30, 2012 at 10:51:00 PM GMT+7, Blogger marco said...

kami sangat menyukai blog ini, krn adminnya professional, menguasai materi dan sangat dermawan dlm sharing ilmu. bahasannya jg lengkap dan inspiratif.
salam kenal dan salam hormat dari kami.

 
At Monday, July 30, 2012 at 11:42:00 PM GMT+7, Blogger Taufik Nurrohman said...

Amiiinnn... ^o^
Nggak perlu dikolaborasi. Tooltip versi library lebih mantafff dibandingkan yang ini. Ini cuma sebagai dasar dari konsep nested tooltip replacement yang praktis saja. Kalau dikolaborasi malah jadi berantakan. Bisa dibayangkan, Spongebob Squarepants berkolaborasi dengan Sandy Sandoro.

 
At Monday, July 30, 2012 at 11:45:00 PM GMT+7, Blogger Taufik Nurrohman said...

WEW!
Salam kenal juga =D

 
At Tuesday, July 31, 2012 at 7:28:00 PM GMT+7, Blogger Putra said...

kalau ditambahin border-radius caranya gmn?

 
At Tuesday, July 31, 2012 at 8:02:00 PM GMT+7, Blogger Putra said...

udah bisa..
terus kalau dikasih transition? :D

 
At Wednesday, August 1, 2012 at 6:40:00 AM GMT+7, Blogger Taufik Nurrohman said...

Agak panjang kalau dijelaskan, tapi pada intinya di sini Saya ganti properti display:none ke display:block menjadi visibility:hidden;opacity:0 ke visibility:visible;opacity:1:

function over(e) {
tooltip.style.visibility = "visible";
tooltip.style.opacity = 1;
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.visibility = "hidden";
tooltip.style.opacity = 0;
this.title = this.getAttribute('original');
this.removeAttribute('original');
}


lalu set CSS transisi di CSS:

#tt {
-webkit-transition:all 0.4s ease-out;
-moz-transition:all 0.4s ease-out;
-ms-transition:all 0.4s ease-out;
-o-transition:all 0.4s ease-out;
transition:all 0.4s ease-out;
}


Demo: http://jsfiddle.net/tovic/TUSns/5/

 
At Friday, August 3, 2012 at 12:14:00 AM GMT+7, Blogger aephobia said...

artikelnya keren2, termasuk yg ini, izin menimba ilmu di sini y kk :yaya:

 
At Saturday, August 4, 2012 at 4:02:00 PM GMT+7, Blogger Unknown said...

wow keren...sebenarnya aku mau ngasih job kepada ADMIN..nanti aku bayar pakai $$...kalau berkenan mohon e-mail ke filmmediafire@gmail.com..
aku tunggu ya..

 
At Saturday, August 4, 2012 at 9:23:00 PM GMT+7, Blogger Taufik Nurrohman said...

Duh... duh... duh....
Emailnya nggak bisa dibuka. Job blogspot?
Nanti Saya hubungi kalau sudah bisa dibuka. Yahoo! sedang susah diakses. Tanggal tua, makannya Saya pasangi hibernasi di formulir komentar :'(

 
At Thursday, August 9, 2012 at 4:55:00 PM GMT+7, Blogger Baharudin Nofiandi said...

Mas broo' pas aku lg surfing di google gak sengaja nemuin blog yang temanya 99.9% sama persis dengan blog ini, apa benar itu blog'nya mas broo? ini alamatnya "blog[dot]pustakaflash[dot]com"

 
At Friday, August 10, 2012 at 5:03:00 AM GMT+7, Blogger debbie irlando manurung said...

mas sorry, ikutan kontes seo sapa tau menang, liat ulasannya http://www.zondim.com/2012/08/pegipegicom-booking-hotel-murah-mudah.html

 
At Sunday, May 26, 2013 at 6:00:00 PM GMT+7, Blogger Mrbej0 said...

kalo link tidak mengunakan title title="" apak muncul tooltip-nya mas ?

 
At Sunday, May 26, 2013 at 8:58:00 PM GMT+7, Blogger Taufik Nurrohman said...

Tidak bisa. Tooltip diambil dari atribut title

 
At Friday, June 28, 2013 at 8:54:00 PM GMT+7, Blogger Admin - TheBerita said...

saya mau pasang border-radius, kok gak bs ya mas ? mohon bantuannya dong :)

 
At Sunday, June 30, 2013 at 9:49:00 AM GMT+7, Blogger Taufik Nurrohman said...

#tt {
-webkit-border-radius:3px;
-moz-border-radius:3px;
border-radius:3px;
}

 
At Monday, July 1, 2013 at 2:15:00 AM GMT+7, Blogger Wiro Sableng said...

mas di blog saya title postingan kog gk ada gimana solusinya tolong

 
At Tuesday, July 2, 2013 at 4:30:00 PM GMT+7, Blogger Taufik Nurrohman said...

<h3 class='post-title entry-title' expr:title='data:post.title'>

 
At Wednesday, August 14, 2013 at 1:06:00 AM GMT+7, Anonymous Anonymous said...

wiiiih... hebat mas... keren.. mantap \o/
sekedar masukan -->
tampilan dan sistem blog ini saya rasa masih keren yg ini :

urang-kurai.blogspot.com

mas mimin tolong dong bkin tutorial yg halaman search ny sperti blog itu ??
trimakasih ^_^

 
At Thursday, October 3, 2013 at 8:03:00 AM GMT+7, Anonymous Anonymous said...

wew keren, mantab. master tambah mantab!
- Blogwalking Yuk! -

 
At Tuesday, December 10, 2013 at 7:18:00 PM GMT+7, Blogger Wildan MR said...

Kalo yang span fungsinya buat apa mas?

 
At Tuesday, December 10, 2013 at 7:35:00 PM GMT+7, Blogger Wildan MR said...

Itu pake jquery berapa mas? :)
Maaf nih saya nyoba pake halaman html sendiri pake jquery-1.8.3.min.js , tapi kok gagal yah? apanya ya mas? :)

 
At Tuesday, December 10, 2013 at 7:39:00 PM GMT+7, Blogger Wildan MR said...

Tapi pas di terapin di blogger ko ada ya? :) Kenapa di html saya ga ada 7:(

 
At Wednesday, March 4, 2015 at 10:24:00 PM GMT+7, Blogger Unknown said...

seep dpt juga yang simple, thanks lagi mastaufik \o/ .

cungkrink96

 

Post a Comment

<< Home