Tooltip Tanpa Plugin Tiap Elemen Dan Pengecualian

Tooltip Tanpa Plugin Tiap Elemen Dan Pengecualian - Dari beberapa tooltip yang pernah saya coba, baru kali ini saya menemukan tooltip yang benar-benar cocok di hati hehehe.... Berbeda dengan kebanyakan tooltip yang menggunakan plugin dengan script yang banyak dan menharuskan menggunakan selektor class pada targetnya, tooltip  yang satu ini benar-benar simple dan hanya menggunakan jquery yang terbilang sederhana. Selain itu kita bebas mengedit jquery untuk menambah elemen targetnya.

Dengan begitu kita tidak perlu mengedit satu per satu link yang pernah kita buat baik di template maupun postingan karena ini akan berfungsi pada semua link yang kita tentukan.

Ini berawal dari sebuah halaman tentang membuat tooltip dengan jquery tanpa plugin Code Chewing yang membuat saya tertarik untuk mencobanya. Dari halaman tersebut tersaji kode-kode untuk membuat tooltip dengan jquery tanpa plugin seperti di bawah ini.

Kode HTML

<a href="#" title="Check out Code Chewing &gt;">Code Chewing</a>

Kode CSS

.tooltip {
  display:none;
  position:absolute;
  border-radius:5px;
  box-shadow:2px 2px 3px rgba(0,0,0,.2);
  background-color:#CCC;
  border:1px solid #F7F7F7;
  text-shadow:-1px -1px 0 #F4F4F4;
  color:#666;
  font:bold italic 16px Tahoma, Geneva, sans-serif;
  padding:10px;
}

Kode Javascript

$(function(){
  $('a').hover(function(e){ // Hover event
    var titleText = $(this).attr('title');
    $(this)
      .data('tiptext', titleText)
      .removeAttr('title');
  $('<p class="tooltip"></p>')
    .text(titleText)
    .appendTo('body')
    .css('top', (e.pageY - 10) + 'px')
    .css('left', (e.pageX + 20) + 'px')
    .fadeIn('slow');
  }, function(){ // Hover off event
    $(this).attr('title', $(this).data('tiptext'));
    $('.tooltip').remove();
  }).mousemove(function(e){ // Mouse move event
    $('.tooltip')
      .css('top', (e.pageY - 10) + 'px')
      .css('left', (e.pageX + 20) + 'px');
 });
});

Dari kode jquery di atas, itu hanya berfungsi pada link dengan kode <a href="" title=""></a> dengan jquery ini  $('a').hover(function(e){

Namun dengan sedikit improvisasi, akhirnya saya berhasil menambahkan tooltip untuk div, input, ataupun image yang memiliki title tag.

Jika kita memiliki div, input, ataupun image dengan title tag, maka kita bisa menambahkannya pada jquery-nya seperti berikut. Misalnya seperti ini html-nya.

<div class="tool" title="Click to open content!">Click here</div>
<input placeholder='Input with title tag' title='Click to search!' type='text'/>
<img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5oADCmT8fLExR-_NuXKHfJHUdIyPzqLyHn_LAzn0KJHaxagI6Tcj8GQXcwE3U_O3q1fBd4xaBLHpIxbwDaME3oRW3L6SKyNkmoh_Ra2oik7mjLu3ZIeWpMjmUcAuJpzi3IXyyXvGwY9Y/s1600/8.png" height="114" title="Title tag of this image" width="220" />

Maka jquery-nya menjadi seperti di bawah ini

$('a,div.tool,input,img').hover(function(e){

Perhatikan pada kode ('a,div.tool,input,img'), silahkan tambahkan elemen yang lebih spesifik ke dalam kurung () dan tanda kutip '' dengan dipisahkan tanda koma , seperti pada contoh di atas.

Dan untuk menambahkan pengecualian ketika kita tidak menginginkan tooltip untuk element tertentu, maka kita tinggal menambahkan kode .not('img.tool,.box input') dipisahkan dengan koma jika ada beberapa elemen pada jquerynya menjadi seperti ini.

$('a,div.tool,input,img').not('img.tool,.box input').hover(function(e){

Sehingga secara keseluruhan, jquery-nya akan menjadi seperti ini

$(function(){
  $('a,div.tool,input,img').not('img.tool,.box input').hover(function(e){ // Hover event
    var titleText = $(this).attr('title');
    $(this)
      .data('tiptext', titleText)
      .removeAttr('title');
  $('<p class="tooltip"></p>')
    .text(titleText)
    .appendTo('body')
    .css('top', (e.pageY - 10) + 'px')
    .css('left', (e.pageX + 20) + 'px')
    .fadeIn('slow');
  }, function(){ // Hover off event
    $(this).attr('title', $(this).data('tiptext'));
    $('.tooltip').remove();
  }).mousemove(function(e){ // Mouse move event
    $('.tooltip')
      .css('top', (e.pageY - 10) + 'px')
      .css('left', (e.pageX + 20) + 'px');
 });
});

DEMO

Jika masih ada elemen lain yang memiliki title tag namun belum menjadi tooltip, silahkan tambahkan element-nya pada jquey di atas.

Seperti untuk related posts yang saya gunakan dari DTE, saya menambahkan kode seperti ini img.related-post-item-thumbnail dan a.related-post-item-title untuk tooltip pada image dan titlenya.

Dan kode CSS dan jquery yang saya gunakan di Kompi Ajaib seperti berikut ini sebagai contohnya, tentunya mungkin elemen yang ditambahkan akan berbeda dengan blog Anda.

Kode CSS

.tooltip {display:none;position:absolute;border-radius:5px;box-shadow: 0 2px 10px rgba(0,0,0,.2);background-color:#333;color:#fff;padding:3px 10px;opacity:.9;z-index:10000}

Kode Javascript

<script type='text/javascript'>
//<![CDATA[
$(function(){
  $('a,img,input,.menu,.close-menu,.translator,img.related-post-item-thumbnail,a.related-post-item-title').not('.paginator,.paginator span a,#subscribe-box input').hover(function(e){ // Hover event
     var titleText = $(this).attr('title');
    $(this)
      .data('tiptext', titleText)
      .removeAttr('title');
   $('<p class="tooltip"></p>')
    .text(titleText)
    .appendTo('body')
    .css('top', (e.pageY - 10) + 'px')
    .css('left', (e.pageX + 20) + 'px')
    .fadeIn('slow');
  }, function(){ // Hover off event
     $(this).attr('title', $(this).data('tiptext'));
    $('.tooltip').remove();
  }).mousemove(function(e){ // Mouse move event
     $('.tooltip')
      .css('top', (e.pageY - 10) + 'px')
      .css('left', (e.pageX + 20) + 'px');
 });
});
//]]> </script>

Semoga postingan di atas bisa dimengerti dan bermanfaat.