Membuat Tooltip Dengan Bootstrap 5

Membuat Tooltip Dengan Bootstrap 5

—

by

Webbiz.ID
in

Tooltip adalah fitur yang berguna untuk menampilkan informasi tambahan saat pengguna mengarahkan kursor ke suatu elemen. Dalam Bootstrap 5, kita dapat dengan mudah membuat tooltip menggunakan komponen tooltip yang disediakan. Berikut adalah contoh kode untuk membuat tooltip dengan Bootstrap 5

HTML
<!DOCTYPE html>
<html lang="en">
   <head>
      <title>Bootstrap</title>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
   </head>
   <body>
      <div class="container mt-3">
         <h3>Tooltip</h3>
         <button type="button" class="btn btn-primary" data-bs-toggle="tooltip" data-bs-placement="top" title="Ini adalah tooltip atas">Tooltip Atas</button>
         <button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Ini adalah tooltip bawah">Tooltip Bawah</button>
         <button type="button" class="btn btn-success" data-bs-toggle="tooltip" data-bs-placement="left" title="Ini adalah tooltip kiri">Tooltip Kiri</button>
         <button type="button" class="btn btn-danger" data-bs-toggle="tooltip" data-bs-placement="right" title="Ini adalah tooltip kanan">Tooltip Kanan</button>
      </div>
      <script>
         var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
         var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
           return new bootstrap.Tooltip(tooltipTriggerEl)
         })
      </script>
   </body>
</html>
HTML
Bootstrap

Tooltip


Dalam contoh di atas, kita menggunakan komponen button dari Bootstrap dan menambahkan atribut data-bs-toggle="tooltip" untuk mengaktifkan tooltip. Atribut data-bs-placement digunakan untuk menentukan posisi tooltip (atas, bawah, kiri, kanan). Atribut title digunakan untuk menentukan teks yang akan ditampilkan dalam tooltip.

Kode JavaScript di bagian bawah digunakan untuk menginisialisasi tooltip pada elemen-elemen yang memiliki atribut data-bs-toggle="tooltip".

Dengan menggunakan kode di atas, kita dapat dengan mudah membuat tooltip yang menarik dan informatif dalam halaman web kita menggunakan Bootstrap.

Selamat mencoba!

Artikel Terbaru ⭐