Menyediakan informasi seputar perkembangan mesin Blogger dan internet secara umum.

jQuery Tooltip onClick

Pada umumnya tooltip akan tampil saat pointer mouse menyentuh sebaris teks yang mengandung tooltip. Tapi bagaimana jika kita ingin menampilkan tooltip dengan cara diklik?

Windows Help and Support
Windows Help and Support

Terinspirasi dari model tooltip definisi yang umum dijumpai pada fasilitas Windows Help and Support, Saya membuat tooltip ini untuk melengkapi koleksi artikel di sini. Tooltip ini tidak akan tampil saat teks tertentu disentuh, melainkan hanya akan tampil saat teks tersebut diklik. Ini sangat efektif untuk menampilkan definisi dari istilah tertentu dengan cepat tanpa harus mengarahkan pembaca menuju halaman lain seperti Wikipedia (misalnya). Saya pernah melihat tooltip semacam ini pada sebuah situs referensi HTML5. Tapi Saya lupa alamatnya. Ada yang tahu?

Lihat Demo Download

Untuk pengguna Blogger, proses instalasi bisa dilakukan dengan cara mengikuti langkah-langkah berikut ini:

Hancurkan Tema

Pertama-tama pastikan bahwa tema Anda sudah dilengkapi dengan jQuery (ambil scriptnya di sini dan abaikan script jQuery easing 1.3. Kita tidak membutuhkan itu). Masuk ke halaman editor HTML tema, kemudian temukan kode ini:

</head>

Salin kode di bawah ini dan letakkan di atasnya:

<script>
//<![CDATA[
$(function() {

    $('abbr').css('cursor', 'pointer').hover(function() {

        // Saya menukar nilai di dalam atribut title untuk dimasukkan ke dalam atribut data-title
        // dan menyingkirkan atribut title dari <abbr>
        // sehingga nilai tooltip asli dari browser tidak akan tampil saat Anda menyentuh elemen <abbr>
        $(this).attr('data-title', $(this).attr('title')).removeAttr('title');

    }, function() {

        // Namun saat pointer menjauhi elemen ini, Saya harus mengembalikan nilai awal dari atribut title dan menghilangkan atribut data-title
        // Ini adalah proses bergantian untuk memastikan agar tampilan <abbr> tidak terganggu dengan
        // munculnya tooltip panjang yang berasal dari atribut title saat didekati pointer mouse.
        $(this).attr('title', $(this).attr('data-title')).removeAttr('data-title');

    // Saat elemen <abbr> diklik...
    }).click(function(e) {

        // Hilangkan semua elemen #tooltip-click yang ada
        $('#tooltip-click').remove(); 
        
        // Kemudian sisipkan elemen #tooltip-click baru pada elemen ini (elemen <abbr> yang diklik)
        $('abbr.underlined').removeClass('underlined');
        $(this).addClass('underlined').append('<div id="tooltip-click"></div>');

        
        // Pastikan tooltip selalu muncul pada area yang terlihat!
        
        var ttWidth   = $('#tooltip-click').outerWidth(),  // Mengambil data lebar tooltip
            ttHeight  = $('#tooltip-click').outerHeight(), // Mengambil data tinggi tooltip

            // Mengambil data lebar layar dan tinggi dokumen
            winWidth  = $(window).width(),
            docHeight = $(document).height(),

            top       = e.pageY + 15, // Set nilai top sebesar koordinat pointer dari batas atas jendela + 15
            left      = e.pageX;      // Set nilai left sebesar koordinat pointer dari batas kiri layar browser

        // Jika top + tinggi tooltip lebih besar dari tinggi dokumen...
        if(top + ttHeight > docHeight) {
            // Set nilai top sebesar top - tinggi tooltip - 15
            top = top - ttHeight - 15;
        } else {
            // Jika tidak, set nilai top sebagai top yang nilainya telah dinyatakan sebelum ini
            top = top;
        }

        // Jika left + lebar tooltip lebih besar dari lebar layar...
        if(left + ttWidth > winWidth) {
        // Set nilai left sebesar left - lebar tooltip - 15
            left = left - ttWidth - 15;
        } else {
        // Jika tidak, set nilai left sebagai left yang nilainya telah dinyatakan sebelum ini
            left = left;
        }

        // Isi elemen #tooltip-click dengan deskripsi yang ada di dalam atribut data-title
        // kemudian tampilkan tooltip dengan efek .show()
        $('#tooltip-click').html($(this).attr('data-title')).css({top:top,left:left}).show(200);

        // Jangan biarkan event .click() pada fungsi ini meluap keluar dari DOM tree
        // Event ini khusus untuk mempengaruhi elemen ini saja
        // Selengkapnya: http://api.jquery.com/event.stopPropagation/
        e.stopPropagation();
    });

    // Jika seluruh dokumen (katakanlah: sesuatu selain <abbr>) diklik...
    $(document).click(function() {
        // Hilangkan elemen #tooltip-click
        $('#tooltip-click').remove();
        $('abbr.underlined').removeClass('underlined');
    });
    
});
//]]>
</script>

Berikutnya temukan kode ]]></b:skin> atau </style>, lalu salin kode ini dan letakkan di atasnya:

/**
 * jQuery Tooltip Click by Taufik Nurrohman
 * Visit: http://dte-feed.blogspot.com
 */

#tooltip-click {
  width:300px;
  position:absolute;
  top:10px;
  left:10px;
  z-index:999;
  background-color:#D6E3AF;
  border:1px solid #869B48;
  -webkit-box-shadow:2px 2px 0px rgba(0,0,0,0.1);
  -moz-box-shadow:2px 2px 0px rgba(0,0,0,0.1);
  box-shadow:2px 2px 0px rgba(0,0,0,0.1);
  padding:10px 15px;
  font:normal 11px/16px Arial,Sans-Serif;
  color:black;
  text-align:left;
  display:none;
}

#tooltip-click h2 {
  margin:0px 0px 10px;
  font-size:18px;
}

abbr.underlined {border-bottom:1px solid #0C3CC1;}

Klik Simpan Tema. Sekarang tinggal tahap aktivasi.

Aktivasi

Sama seperti jQuery Toolpik, Saya menargetkan tooltip dari elemen <abbr>. Jadi, untuk mencantumkan tooltip pada teks tertentu di dalam posting/artikel blog cukup dengan cara membungkus teks yang Anda inginkan dengan elemen <abbr> kemudian beri atribut title dengan nilai yang Anda kehendaki:

Lorem ipsum dolor sit amet, <abbr title="Isi tooltip di sini">consectetuer inside abbr</abbr> adipiscing elit. Lorem ipsum dolor sit amet, <abbr title="Isi tooltip di sini">consectetuer inside abbr</abbr> adipiscing elit.
Lorem ipsum dolor sit amet, <abbr title="Isi tooltip di sini">consectetuer inside abbr</abbr> adipiscing elit. Lorem ipsum dolor sit amet, <abbr title="Isi tooltip di sini">consectetuer inside abbr</abbr> adipiscing elit.

  

Berlangganan

Berlangganan: Dapatkan berbagai materi dan informasi seputar dunia pemrograman yang tidak akan pernah bisa kalian dapatkan di buku dan di bangku kuliah.

 4 Komentar

Memuat…

Tautan (link) hidup dalam komentar akan terhapus secara otomatis.
Untuk menyisipkan tautan dengan aman, gunakan kode [url=http://example.com]Teks Tautan[/url]
Untuk menyisipkan kode, gunakan tag <i rel="code">KODE ANDA</i>
Untuk menyisipkan gambar, gunakan kode [img]URL GAMBAR[/img]
Untuk menyisipkan judul, gunakan tag <b rel="h4">JUDUL ANDA DI SINI…</b>
Untuk menciptakan efek tebal gunakan tag <strong>TEKS ANDA DI SINI…</strong>
Untuk menciptakan efek huruf miring gunakan tag <em>TEKS ANDA DI SINI…</em>

Khusus untuk membalas komentar disarankan menggunakan tombol balas di samping komentar terkait dibandingkan menggunakan formulir komentar di bawah agar komunikasi lebih terstruktur. Karena mungkin, apa yang Anda tanyakan/katakan saat ini akan sangat bermanfaat bagi pembaca lain.

:) :( ^_^ :D ;) :bd :'( :\ ;p B) :Q :Ozzz 7:( \o/ **p :* 0:) :a 7:O *fuck* x& x@ ~x( *yaya* =p*

Nama Saya Taufik Nurrohman. Sebenarnya Saya tidak bisa disebut sebagai seorang yang profesional dalam bidang ini, karena Saya tidak menguasai bidang ini melalui pendidikan formal. Saya hanyalah seorang antusias. Dibandingkan sebagai seorang desainer atau pengembang, Saya lebih suka jika disebut sebagai seorang hobiis saja yang tertarik dengan dunia web.

Daftar Tautan

Saya tidak bisa hidup tanpa JavaScript! Aktifkan JavaScript?
Ke atas!