Cara Membuat Tooltip dengan CSS

Cara Membuat Tooltip dengan CSS - Siapa yang tidak tahu dengan Tooltip ? ya, tooltip merupakan sebuah informasi pada suatu objek, biasanya tooltip akan muncul ketika kita mengarahkan kursor terhadap objek tersebut. Nah, buat kalian yang ingin membuat tooltip tapi masih bingung cara membuatnya, kali ini saya akan bagikan tutorialnya. Berikut akan saya praktekan bagaimana Cara Membuat Tooltip dengan CSS.

Langkah 1 : Cara Membuat Tooltip dengan CSS

Baik kita mulai dengan mempersiapkan satu gambar sebagai objek yang akan diberikan tooltip, lalu buatlah file index.html dan ketikan sintak HTML berikut sebagai struktur awal dalam membuat tooltip.

<body>
    <div class="tooltip" data-description="Hallo, i am Jon !">
      <img src="Avatar.png" width="120">
    </div>
</body>

Langkah 2 : Cara Membuat Tooltip dengan CSS

Setelah membuat struktur HTML seperti diatas, selanjutnya kita akan mengatur layout dan tentunya membuat tooltip untuk objek gambarnya dengan sintak CSS berikut.

@import url('https://fonts.googleapis.com/css?family=Jua');
body {
  background-color: #efefef;
}

.tooltip {
  font-family: 'Jua', sans-serif;
  font-size: 20px;
  text-align:center;
  padding: 20px;
  margin: 100px auto;
  position: relative;
  width: 120px;
}

.tooltip:before {
  content: attr(data-description);
  box-sizing: border-box;
  background: white;
  color: #a4c100;
  padding: 20px;
  position: absolute;
  left: 50%;
  top: -30px;
  margin-left: -100px;
  width: 200px;
  line-height: 25px;
  border-radius: 5px;
  opacity: 0;
  transition: .25s ease-in-out;
  border-top: 5px solid #ccb881;
}

.tooltip:after {
  content: '';
  position: absolute;
  top: 35px;
  left: 49%;
  margin-left: -10px;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 10px solid white;
  transition: .25s ease-in-out;
  opacity: 0;
}

.tooltip:hover:before {
  opacity: 1;
  top: -50px;
}

.tooltip:hover:after {
  opacity: 1;
  top: 15px;
}

Setelah semua sintak HTML dan CSS telah diketikan, silahkan simpan filenya kemudian buka pada browser masing - masing dan lihat hasilnya. Maka hasil akhirnya akan terlihat seperti gambar berikut. Jika kalian arahkan kursor pada gambarnya maka akan muncul tooltipnya.

Cara Membuat Tooltip dengan CSS

Bagaimana, menarik bukan ? Baiklah cukup sekian tutorial mengenai bagaimana Cara Membuat Tooltip dengan CSS, semoga tutorial ini bisa bermanfaat dan selmat mencoba :)

4 September 2018

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 Mini Bootcamp Backend Laravel 11 Bulan Mei 2024 di DUMET School
Webinar Selanjutnya Mei 2024

Minggu, 26 Mei 2024, 09.00-13.00 WIB

(4 Jam Membuat Backend di Laravel 11)

chat