Mecha versi 2.6.4 sudah dirilis!

Tooltip Kustom Otomatis untuk Semua Tautan

Tabel Konten
  1. Demo 
<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 

30 Komentar

MUX SPARROW

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

Taufik Nurrohman

Ada suka ada duka :\

MUX SPARROW

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

Taufik Nurrohman

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.

Anonim

apa bedanya sama tooltip yang sebelum2nya mas??

Taufik Nurrohman

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

marco

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.

Putra

kalau ditambahin border-radius caranya gmn?

Putra

udah bisa..
terus kalau dikasih transition? :D

Taufik Nurrohman

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/

aephobia

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

Unknown

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..

Taufik Nurrohman

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 :'(

Baharudin Nofiandi

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"

debbie irlando manurung

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

Mrbej0

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

Admin - TheBerita

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

Taufik Nurrohman

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

Wiro Sableng

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

Taufik Nurrohman

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

Anonim

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 ^_^

Anonim

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

Wildan MR

Kalo yang span fungsinya buat apa mas?

Wildan MR

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? :)

Wildan MR

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

Unknown

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

cungkrink96

Komentar telah ditutup.