Tooltip

Termasuk bagian Frontend Praktis dalam perjalanan HTML di Coddy. Pelajaran 23 dari 35.

Tooltip adalah elemen pop-up kecil yang informatif dan muncul saat pengguna mengarahkan kursor ke elemen antarmuka atau memfokuskannya. Tooltip memberikan konteks tambahan tanpa membuat UI utama berantakan.

Mari buat tooltip dasar menggunakan HTML dan CSS:

Pertama, buat struktur HTML:

<div class="tooltip-container">
  <button>Hover over me</button>
  <span class="tooltip">This is a tooltip!</span>
</div>

Selanjutnya, tambahkan CSS untuk mengatur posisi dan menampilkan atau menyembunyikan tooltip:

.tooltip-container {
  position: relative;
  display: inline-block;
}

.tooltip {
  visibility: hidden; 
  /* Atur posisi tooltip */
  position: absolute;
  bottom: 125%;
  left: 50%;
  transform: translateX(-50%);
  
  /* Tambahkan sedikit jeda sebelum tooltip ditampilkan */
  opacity: 0;
  transition: opacity 0.3s;
}

/* Tampilkan tooltip saat kursor berada di atas container */
.tooltip-container:hover .tooltip {
  visibility: visible;
  opacity: 1;
}

Dengan kode ini, saat kamu mengarahkan kursor ke tombol, tooltip akan muncul di atasnya.

Tantangan

Mudah

Kamu diberi sebuah tombol HTML dengan tooltip yang muncul saat pengguna mengarahkan kursor ke tombol "Help". Tugasmu:

Sembunyikan tooltip secara default.
Tambahkan warna latar belakang dan warna teks agar tooltip terlihat jelas.
Tengahkan teks di dalam tooltip.
Tambahkan sedikit padding agar tampilan tooltip lebih bagus.
Buat sudutnya membulat dengan border-radius.

Coba sendiri

<!DOCTYPE html>
<html>
<head>
  <title>Tooltips</title>
  <style>
    .tooltip-container {
      position: relative;
      display: inline-block;
      margin: 50px;
    }
    
    button {
      padding: 8px 16px;
      cursor: pointer;
    }
    
    .tooltip {
      
      /* Animation properties */
      opacity: 0;
      transition: opacity 0.3s;
    }
    
    /* Show the tooltip when hovering over the container */
    .tooltip-container:hover .tooltip {
      visibility: visible;
      opacity: 1;
    }
  </style>
</head>
<body>
  <div class="tooltip-container">
    <button>Help</button>
    <span class="tooltip">Click for assistance</span>
  </div>
</body>
</html>