Pada umumnya tooltip akan tampil dikala pointer mouse menyentuh sebaris teks yang mengandung tooltip. Tapi bagaimana bila kita ingin menampilkan tooltip dengan cara diklik?
Terinspirasi dari model tooltip definisi yang umum dijumpai pada kemudahan Windows Help and Support, Saya menciptakan tooltip ini untuk melengkapi koleksi artikel di sini. Tooltip ini tidak akan tampil dikala teks tertentu disentuh, melainkan hanya akan tampil dikala teks tersebut diklik. Ini sangat efektif untuk menampilkan definisi dari istilah tertentu dengan cepat tanpa harus mengarahkan pembaca menuju halaman lain ibarat Wikipedia (misalnya). Saya pernah melihat tooltip semacam ini pada sebuah situs rujukan HTML5. Tapi Saya lupa alamatnya. Ada yang tahu?
Untuk pengguna Blogger, proses instalasi dapat 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 arahan ini:
</head>
Salin arahan 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 orisinil dari browser tidak akan tampil dikala Anda menyentuh elemen <abbr> $(this).attr('data-title', $(this).attr('title')).removeAttr('title'); }, function() { // Namun dikala pointer menjauhi elemen ini, Saya harus mengembalikan nilai awal dari atribut title dan menghilangkan atribut data-title // Ini yaitu proses bergantian untuk memastikan supaya tampilan <abbr> tidak terganggu dengan // munculnya tooltip panjang yang berasal dari atribut title dikala 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 gres 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 imbas .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 mensugesti 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 arahan ]]></b:skin> atau </style>, kemudian salin arahan 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 ibarat 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="jQuery Tooltip onClick">consectetuer inside abbr</abbr> adipiscing elit. Lorem ipsum dolor sit amet, <abbr title="jQuery Tooltip onClick">consectetuer inside abbr</abbr> adipiscing elit. Lorem ipsum dolor sit amet, <abbr title="jQuery Tooltip onClick">consectetuer inside abbr</abbr> adipiscing elit. Lorem ipsum dolor sit amet, <abbr title="jQuery Tooltip onClick">consectetuer inside abbr</abbr> adipiscing elit.