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

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.