Cara Membuat Tooltip Gambar dengan Bootstrap 4

Cara Membuat Tooltip Gambar dengan Bootstrap 4 - Tooltip merupakan sebuah elemen yang dapat kita gunakan untuk memberikan suatu informasi kecil berupa teks ataupun gambar. Didalam bootstrap terdapat elemen tooltip yang bisa kita gunakan dengan mudah, jika kalian pernah menggunakan tooltip bootstrap pasti sudah tau ya cara menggunakannya. Nah, kali ini saya akan bagikan tutorial sederhana tentang tooltip yang ada pada bootstrap yaitu bagaimana Cara Membuat Tooltip Gambar dengan Bootstrap 4. Buat kalian yang ingin mencoba membuat tooltip gambar kalian bisa ikuti langkah - langkahnya berikut ini.

Pada kasus kali ini tooltip dibuat dengan bootstrap 4, tentunya kalian wajib menyiapkan file bootstrapnya terlebih dahulu ya.. Kalian bisa menggunakan bootstrap secara offline ataupun online. Pada kasus yang saya buat kali ini saya menggunakan bootstrap 4 secara online.  

Setelah itu kalian bisa ketikan sintak untuk membuat tooltip gambar nya seperti berikut.

<div class="container mt-5">
  <div class="row justify-content-center">
    <div class="col-md-5">
      <a href="#" class="btn btn-warning rounded-circle border border-dark" data-toggle="tooltip" title="<img src='img-profile.jpg' width='100' class='img-fluid rounded'>">
        <i class="fab fa-twitter"></i>
      </a href="#">
      <a href="#" class="btn btn-warning rounded-circle border border-dark" data-toggle="tooltip" title="<img src='img-profile.jpg' width='100' class='img-fluid rounded'>">
        <i class="fab fa-facebook"></i>
      </a href="#">
      <a href="#" class="btn btn-warning rounded-circle border border-dark" data-toggle="tooltip" title="<img src='img-profile.jpg' width='100' class='img-fluid rounded'>">
        <i class="fab fa-instagram"></i>
      </a href="#">
      <a href="#" class="btn btn-warning rounded-circle border border-dark" data-toggle="tooltip" title="<img src='img-profile.jpg' width='100' class='img-fluid rounded'>">
        <i class="fab fa-google-plus-g"></i>
      </a href="#">
    </div>
  </div>
</div>

Dari sintak diatas, attribute title silahkan kalian isikan dengan tag img kemudian load gambar.

<img src='img-profile.jpg' width='100' class='img-fluid rounded'>

Setelah sintak diatas diketikan, selanjutnya adalah mengubah sedikit style dari tooltipnya kalian bisa tambahkan sintak CSS berikut ini.

<style>
  .rounded-circle {
    width: 70px;
    height: 70px;
  }
  .btn {
    line-height: 4.2rem !important;
  }
  .fab {
    font-size: 30px;  
  }
  .tooltip-inner{
    padding:2px 2px;
    border-radius:5px;    
  }
  .border-dark {
    border: 2px solid #343a40 !important
  }
</style>

Jika sudah kalian ketikan semua sintak diatas, simpan filenya kembali kemudian kalian bisa lihat hasil akhirnya dibrowser masing - masing. Maka akan terlihat seperti gambar berikut.

Cara Membuat Tooltip Gambar dengan Bootstrap 4

Nah, itulah Cara Membuat Tooltip Gambar dengan Bootstrap 4, semoga tutorial bootstrap tentang tooltip ini bisa bermanfaat buat kalian. Jangan lupa untuk melihat artikel lainnya di dumetschool.com. Sekian dan sampai jumpa

4 Februari 2020

Webinar Gratis 2024


Selanjutnya Pada Bulan Maret 2024

Sabtu, 09 Maret 2024


10 Bahasa Rekomendasi Untuk Dipelajari di 2024

Python Developer, Data Science, Web Application

Kursus Python Django Web Application 2024 di DUMET School Kursus Postgre SQL Database Developer Terbaik 2024 di Jakarta
chat