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

  • Surga Kenari

    keren :3

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

    • marco

      Amiin...

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

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