Tooltip CSS Murni

Komponen tooltip sederhana dan ringan yang dibangun sepenuhnya dengan HTML dan CSS, tanpa sentuhan JavaScript. Tooltip ini akan muncul dengan efek memudar (fade in) yang mulus dan tampil persis di atas elemen target saat kursor diarahkan (hover).

Pratinjau

Kode Implementasi

Silakan salin dan tempelkan kode di bawah ini ke dalam proyek Anda.

<!-- index.html -->
<div class="tooltip-wrapper">
  <button class="tooltip-trigger">Arahkan ke sini</button>
  <div class="tooltip-content">
    Ini adalah tooltip CSS murni!
  </div>
</div>

/* styles.css */
.tooltip-wrapper {
  position: relative;
  display: inline-block;
}

.tooltip-trigger {
  padding: 10px 20px;
  border-radius: 8px;
  border: none;
  background-color: #3b82f6;
  color: #fff;
  cursor: pointer;
  font-weight: bold;
  transition: background-color 0.2s;
}

.tooltip-trigger:hover {
  background-color: #2563eb;
}

.tooltip-content {
  position: absolute;
  bottom: 130%;
  left: 50%;
  transform: translateX(-50%) translateY(10px);
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  background-color: #1f2937;
  color: #fff;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 14px;
  white-space: nowrap;
  z-index: 10;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

/* Segitiga menghadap ke bawah (panah) */
.tooltip-content::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -6px;
  border-width: 6px;
  border-style: solid;
  border-color: #1f2937 transparent transparent transparent;
}

/* Perilaku saat di-hover */
.tooltip-wrapper:hover .tooltip-content {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

Penjelasan Implementasi

position: relative dan position: absolute: Dengan memberikan position: relative pada elemen tooltip-wrapper, posisi badan tooltip (tooltip-content) dapat diatur secara absolut (absolute) menyesuaikan dengan kontainer induknya.
visibility dan opacity: Karena properti display: none tidak dapat dianimasikan (tidak mendukung transition), kita menggunakan perpaduan visibility: hidden dan opacity: 0 untuk menyembunyikannya.
Animasi yang Mulus: Dengan menggeser sedikit posisi pada sumbu Y menggunakan transform: translateY(10px) dan mengembalikannya ke translateY(0) saat di-hover, efek melayang ke atas yang lembut berhasil diciptakan.
Pembuatan Segitiga CSS: Memanfaatkan pseudo-element .tooltip-content::after, sebuah ekor menyerupai balon percakapan (segitiga) digambar menggunakan manipulasi properti border pada CSS.