Cara Membuat Tooltip dengan jQuery Tanpa Plugin

Kamu punya ikon kecil di tabel data, dan pengguna harus menebak artinya karena tooltip bawaan browser baru muncul setelah kursor diam beberapa detik. Tooltip seperti itu juga tidak bisa diberi warna atau diatur lebarnya. Dengan jQuery, kira-kira 40 baris kode sudah cukup untuk membuat tooltip yang muncul lebih cepat, mengikuti posisi elemen, dan tetap terbaca di layar sempit.

Menyiapkan Struktur dan Gaya Dasar

Satu elemen tooltip dipakai ulang untuk semua pemicu. Pasang di akhir body supaya posisinya tidak terpotong oleh overflow: hidden pada kontainer di atasnya.

<button class="tip" data-tip="Salin tautan ke clipboard">Salin</button>
<button class="tip" data-tip="Hapus baris ini">Hapus</button>
<div id="tooltip" role="tooltip" aria-hidden="true"></div>

Atribut data-tip menyimpan teks untuk tiap pemicu, jadi kamu tidak perlu menulis elemen terpisah per tombol. Gaya CSS dibuat minimal agar posisi mudah dihitung:

#tooltip {
  position: absolute;
  top: 0;
  left: 0;
  max-width: 220px;
  padding: 6px 10px;
  background: #222;
  color: #fff;
  font-size: 13px;
  border-radius: 4px;
  pointer-events: none;
  opacity: 0;
  transition: opacity .15s ease;
  z-index: 9999;
}
#tooltip.is-visible { opacity: 1; }

pointer-events: none penting. Tanpa itu, tooltip bisa menghalangi kursor dan memicu event mouseleave berulang sehingga tooltip berkedip.

Logika Dasar: Tampilkan, Posisikan, Sembunyikan

Pemicu dipilih lewat kelas, bukan ID, supaya satu blok kode berlaku untuk semua tombol. Kalau kamu baru pindah dari selektor dasar, ada baiknya membaca dulu cara memilih elemen dengan selector jQuery agar selektornya tidak terlalu longgar.

var $tip = $('#tooltip');
var tipTimer;

function showTip($el) {
  var teks = $el.data('tip');
  if (!teks) return;
  $tip.text(teks).attr('aria-hidden', 'false').addClass('is-visible');

  var offset = $el.offset();
  var lebar = $tip.outerWidth();
  var tinggi = $tip.outerHeight();
  var kiri = offset.left + $el.outerWidth() / 2 - lebar / 2;
  var atas = offset.top - tinggi - 8;

  if (atas < 0) atas = offset.top + $el.outerHeight() + 8;
  kiri = Math.max(8, Math.min(kiri, $(window).width() - lebar - 8));

  $tip.css({ top: atas, left: kiri });
}

function hideTip() {
  $tip.removeClass('is-visible').attr('aria-hidden', 'true');
}

$(document).on('mouseenter focusin', '.tip', function () {
  clearTimeout(tipTimer);
  var $el = $(this);
  tipTimer = setTimeout(function () { showTip($el); }, 120);
});

$(document).on('mouseleave focusout', '.tip', function () {
  clearTimeout(tipTimer);
  hideTip();
});

Delay 120 milidetik mencegah tooltip muncul saat kursor hanya melintas cepat di atas tombol. Event dipasang pada document dengan selektor .tip karena tombol bisa ditambah atau dihapus setelah halaman dimuat, misalnya pada tabel yang diisi lewat Ajax. Pola ini sama dengan yang dibahas di event delegation jQuery untuk elemen yang ditambah dinamis.

Menangani Kasus yang Sering Terlewat

Beberapa situasi membuat versi sederhana di atas terlihat rusak. Semuanya bisa ditangani tanpa menambah plugin.

Scroll dan resize. Posisi dihitung sekali saat tooltip muncul. Kalau pengguna menggulir dengan tooltip masih tampil, tooltip tertinggal. Panggil hideTip() di event scroll dan resize.
Tooltip di dalam elemen terpotong. Karena tooltip dipasang di body, masalah overflow tidak muncul. Tapi perhitungan offset() tetap benar hanya jika tidak ada elemen berposisi fixed di antaranya.
Perangkat sentuh. Tidak ada mouseenter, jadi tooltip tidak pernah tampil. Tambahkan penanganan click yang menampilkan tooltip sebentar, atau sembunyikan saja pemicu tooltip dan tampilkan teks sebagai keterangan biasa.
Panjang teks. Teks panjang membuat tooltip melebar ke samping. max-width di CSS sudah membatasinya, dan tinggi dihitung ulang lewat outerHeight() setiap kali tampil.

Membuatnya Bisa Diakses Keyboard dan Pembaca Layar

Atribut aria-hidden yang diganti antara true dan false membuat pembaca layar mengumumkan teks tooltip saat fokus berpindah. Pemicu sebaiknya elemen yang memang bisa difokus, seperti button atau a, bukan div biasa. Kalau pemicunya tombol berisi ikon saja, tambahkan aria-label agar nama tombol tetap terbaca meski tooltip belum muncul.

Event focusin dan focusout memakai delegasi, jadi pengguna yang menavigasi dengan Tab tetap mendapat tooltip. Tooltip berbasis CSS :hover hanya bekerja untuk mouse, sedangkan pendekatan ini mencakup keyboard.

Kapan Sebaiknya Pindah ke Plugin

Kode di atas cukup untuk tooltip teks pendek. Kebutuhan berikut biasanya menandakan sudah waktunya memakai pustaka yang lebih lengkap:

Tooltip harus muncul di dalam modal atau elemen dengan transform, yang mengubah titik acuan posisi.
Butuh animasi masuk dengan panah penunjuk yang mengikuti sisi elemen.
Tooltip harus mengikuti kursor, bukan menempel di tengah elemen.

Untuk dua kebutuhan pertama, memaksakan perhitungan manual justru menambah kasus khusus yang sulit dirawat. Membaca kode plugin yang sudah ada juga membantu memahami cara mereka menghitung posisi di dalam kontainer berubah.

Ringkasan

Tooltip buatan sendiri terdiri dari satu elemen yang dipakai ulang, posisi yang dihitung dari offset() pemicu, dan event berdelegasi agar tetap bekerja pada elemen dinamis. Tambahkan penanganan scroll, sentuhan, dan fokus keyboard sebelum dipakai di produksi. Kalau nanti kamu perlu memuat data tooltip dari server, pola pengambilan datanya mirip dengan callback dan promise jQuery saat ambil data, dan untuk daftar panjang yang butuh penomoran halaman, lihat cara membuat pagination PHP tanpa library tambahan.

Pertanyaan yang Sering Diajukan

Apakah tooltip ini bisa dipakai pada elemen yang dimuat lewat Ajax?

Bisa, karena event dipasang pada document dengan selektor .tip. Elemen baru yang punya kelas tersebut otomatis ikut berfungsi tanpa perlu memasang ulang event.

Kenapa tooltip kadang muncul di posisi yang salah setelah halaman digulir?

Posisi dihitung sekali saat tooltip tampil. Kalau halaman digulir tanpa menyembunyikan tooltip, koordinatnya menjadi basi. Sembunyikan tooltip pada event scroll, atau hitung ulang posisi di dalam event tersebut.

Apakah perlu library tambahan untuk tooltip sederhana?

Tidak, selama kebutuhannya teks pendek dan posisi di atas atau bawah elemen. Plugin baru masuk hitungan ketika kamu butuh panah penunjuk beranimasi, posisi mengikuti kursor, atau tooltip di dalam modal dengan transform.