CSS - Panduan untuk tooltip: Panduan untuk Pemula

Hai sana, para desainer web masa depan! Hari ini, kita akan melihat dunia yang menakjubkan dari tooltip CSS. Sebagai guru komputer tetangga yang ramah, saya sangat senang untuk membimbing Anda dalam perjalanan ini. Jangan khawatir jika Anda belum pernah menulis baris kode sebelumnya - kita akan mulai dari dasar dan naik tingkat perlahan-lahan. Jadi, ambil secangkir kopi (atau teh, jika itu hal Anda), dan mari kita mulai!

Apa Itu Tooltip?

Sebelum kita melompat ke membuat tooltip, mari kita mengerti apa itu tooltip. Bayangkan Anda mengarahkan mouse ke ikon di situs web, dan tiba-tiba sebuah kotak kecil muncul dengan beberapa informasi tambahan. Itu adalah tooltip! Mereka seperti penolong kecil yang menyediakan konteks tambahan tanpa membanjiri konten utama Anda.

Membuat Tooltip

Mari kita mulai dengan membuat tooltip sederhana. Kita akan memerlukan beberapa HTML dan CSS untuk ini. Jangan khawatir jika Anda belum memahami segalanya segera - kita akan memecahnya step by step.

<div class="tooltip">Ambil mouse di atas saya!
<span class="tooltiptext">Ini adalah tooltip</span>
</div>

Sekarang, mari kita tambahkan beberapa CSS agar ia bekerja:

.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dot black;
}

.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
position: absolute;
z-index: 1;
bottom: 125%;
left: 50%;
margin-left: -60px;
}

.tooltip:hover .tooltiptext {
visibility: visible;
}

Mari kitauraikan ini:

1. Kita menetapkan kontainer utama ke position: relative agar kita dapat menempatkan tooltip relatif kepadanya.
2. Tekst tooltip disembunyikan secara default dengan visibility: hidden.
3. Kita menggunakan position: absolute untuk menempatkan tooltip.
4. Pseudo-class :hover membuat tooltip terlihat saat kita mengarahkan mouse ke kontainer.

Menempatkan Tooltip

Sekarang kita tahu bagaimana membuat tooltip dasar, mari kita jelajahi berbagai cara untuk menempatkan mereka. Kita dapat menempatkan tooltip di atas, bawah, kanan, atau kiri dari elemen.

Tooltip Atas

Kita sudah melihat tooltip atas dalam contoh pertama kita. Mari ingatkan lagi:

.tooltip .tooltiptext {
bottom: 125%;
left: 50%;
margin-left: -60px;
}

Tooltip Bawah

Untuk membuat tooltip bawah, kita hanya perlu mengubah beberapa baris:

.tooltip .tooltiptext {
top: 125%;
left: 50%;
margin-left: -60px;
}

Tooltip Kanan

Untuk tooltip kanan, kita mengatur penempatan seperti ini:

.tooltip .tooltiptext {
top: -5px;
left: 105%;
}

Tooltip Kiri

Dan untuk tooltip kiri:

.tooltip .tooltiptext {
top: -5px;
right: 105%;
}

Panah Tooltip

Sekarang, mari kita tambahkan sedikit keindahan ke tooltip kita dengan panah! These small triangles make our tooltips look more professional and help point to the exact element they're describing.

Panah Tooltip Atas

Untuk menambahkan panah ke tooltip atas, kita akan menggunakan pseudo-element ::after:

.tooltip .tooltiptext::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: black transparent transparent transparent;
}

Ini membuat sebuah segitiga kecil yang menunjuk ke bawah dari tooltip.

Panah Tooltip Bawah

Untuk panah bawah, kita akan menggunakan CSS yang mirip tetapi mengubah penempatan dan warna border:

.tooltip .tooltiptext::after {
content: "";
position: absolute;
bottom: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent transparent black transparent;
}

Panah Tooltip Kanan

Untuk panah ke kanan:

.tooltip .tooltiptext::after {
content: "";
position: absolute;
top: 50%;
right: 100%;
margin-top: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent black transparent transparent;
}

Panah Tooltip Kiri

Dan untuk panah ke kiri:

.tooltip .tooltiptext::after {
content: "";
position: absolute;
top: 50%;
left: 100%;
margin-top: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent transparent transparent black;
}

Tooltip Pergeseran

Ingin menambahkan sedikit animasi halus ke tooltip Anda? Mari kita buat mereka muncul secara perlahan!

.tooltip .tooltiptext {
opacity: 0;
transition: opacity 0.3s;
}

.tooltip:hover .tooltiptext {
opacity: 1;
}

CSS ini akan membuat tooltip Anda muncul secara halus dalam 0.3 detik saat Anda mengarahkan mouse ke elemen.

Kelebihan Tooltip

Sekarang kita telah belajar membuat dan menggaya tooltip, mari bicarakan mengapa mereka sangat bagus:

1. Menyimpan Ruang: Tooltip memungkinkan Anda menyediakan informasi tambahan tanpa membanjiri konten utama Anda.
2. User-friendly: Mereka menyediakan klarifikasi instan tepat di tempat pengguna memerlukannya.
3. Meningkatkan UX: Tooltip dapat membimbing pengguna melalui antarmuka Anda, membuat navigasi lebih mudah.
4. Fleksibilitas: Seperti yang kita lihat, tooltip dapat diposisikan dan digayakan dalam berbagai cara untuk memenuhi desain Anda.

Metode Tooltip

Berikut adalah tabel praktis yang menggabungkan metode tooltip yang kita cover:

Metode	Deskripsi
Tooltip Atas	Muncul di atas elemen
Tooltip Bawah	Muncul di bawah elemen
Tooltip Kanan	Muncul di sebelah kanan elemen
Tooltip Kiri	Muncul di sebelah kiri elemen
Panah Tooltip	Menambahkan panah ke tooltip
Tooltip Pergeseran	Menambahkan animasi pergeseran halus

Dan itu dia, teman-teman! Anda sekarang dilengkapi pengetahuan untuk membuat tooltip stylish dan informatif untuk proyek web Anda. Ingat, latihan membuat sempurna, jadi jangan khawatir untuk mencoba gaya dan posisi yang berbeda. Siapa tahu? Anda mungkin saja menciptakan desain tooltip yang menjadi trend berikutnya!

Semangat coding, dan semoga tooltip Anda selalu membantu dan tidak pernah mengganggu!

Credits: Image by storyset