Keterangan Alat CSS
Buat tooltips dengan CSS.
Demo: Contoh Tooltip
Tip alat sering digunakan untuk menentukan informasi tambahan tentang sesuatu ketika pengguna menggerakkan penunjuk tetikus di atas suatu elemen:
Keterangan Alat Dasar
Buat tooltip yang muncul saat pengguna menggerakkan mouse di atas elemen:
Contoh
<style>
/* Tooltip container */
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted
black; /* If you want dots under the hoverable text */
}
/* Tooltip text
*/
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
padding: 5px 0;
border-radius: 6px;
/* Position the tooltip text - see examples below! */
position: absolute;
z-index: 1;
}
/* Show
the tooltip text when you mouse over the tooltip container */
.tooltip:hover
.tooltiptext {
visibility: visible;
}
</style>
<div class="tooltip">Hover
over me
<span class="tooltiptext">Tooltip
text</span>
</div>
Contoh Dijelaskan
HTML: Gunakan elemen penampung (seperti <div>) dan tambahkan
"tooltip"kelas ke dalamnya. Saat pengguna mengarahkan mouse ke <div> ini, teks tooltip akan ditampilkan.
Teks tooltip ditempatkan di dalam elemen sebaris (seperti <span>) dengan class="tooltiptext".
CSS: Penggunaan tooltipkelas position:relative, yang diperlukan untuk memposisikan teks tooltip ( position:absolute).
Catatan: Lihat contoh di bawah tentang cara memposisikan tooltip.
Kelas tooltiptextmenyimpan teks tooltip yang sebenarnya. Itu disembunyikan secara default, dan akan terlihat saat mengarahkan kursor (lihat di bawah). Kami juga telah menambahkan beberapa gaya dasar ke dalamnya: lebar 120px, warna latar belakang hitam, warna teks putih, teks di tengah, dan padding atas dan bawah 5px.
Properti CSS border-radiusdigunakan untuk menambahkan sudut membulat ke teks tooltip.
:hoverSelector digunakan untuk menampilkan teks tooltip ketika pengguna menggerakkan mouse di atas <div> dengan class="tooltip".
Tip Alat Pemosisian
Dalam contoh ini, tooltip ditempatkan di sebelah kanan ( left:105%) dari teks "hoverable" (<div>). Perhatikan juga bahwa top:-5pxdigunakan untuk menempatkannya di tengah elemen wadahnya. Kami menggunakan angka 5 karena teks tooltip memiliki padding atas dan bawah 5px. Jika Anda meningkatkan paddingnya, tingkatkan juga nilai topproperti untuk memastikannya tetap berada di tengah (jika ini yang Anda inginkan). Hal yang sama berlaku jika Anda ingin tooltip ditempatkan di sebelah kiri.
Keterangan Alat Kanan
.tooltip .tooltiptext {
top: -5px;
left:
105%;
}
Hasil:
Keterangan Alat Kiri
.tooltip .tooltiptext {
top: -5px;
right:
105%;
}
Hasil:
Jika Anda ingin tooltip muncul di atas atau di bawah, lihat contoh di bawah. Perhatikan bahwa kami menggunakan margin-leftproperti dengan nilai minus 60 piksel. Ini untuk memusatkan tooltip di atas/di bawah teks yang dapat dilayangkan. Ini diatur ke setengah lebar tooltip (120/2 = 60).
Keterangan Alat Teratas
.tooltip .tooltiptext {
width: 120px;
bottom: 100%;
left:
50%;
margin-left: -60px; /* Use half of the width
(120/2 = 60), to center the tooltip */
}
Hasil:
Keterangan Alat Bawah
.tooltip .tooltiptext {
width: 120px;
top: 100%;
left:
50%;
margin-left: -60px; /* Use half of the width
(120/2 = 60), to center the tooltip */
}
Hasil:
Tooltip Panah
Untuk membuat panah yang akan muncul dari sisi tertentu dari tooltip, tambahkan konten "kosong" setelah tooltip, dengan kelas elemen semu ::afterbersama dengan content
propertinya. Panah itu sendiri dibuat menggunakan batas. Ini akan membuat tooltip terlihat seperti gelembung ucapan.
Contoh ini menunjukkan cara menambahkan panah ke bagian bawah tooltip:
Panah Bawah
.tooltip .tooltiptext::after {
content: " ";
position: absolute;
top: 100%;
/* At the bottom of the tooltip */
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: black transparent transparent transparent;
}
Hasil:
Contoh Dijelaskan
Posisikan panah di dalam tooltip: top: 100%akan menempatkan panah di bagian bawah tooltip. left: 50%akan memusatkan panah.
Catatan: Properti border-widthmenentukan ukuran panah. Jika Anda mengubah ini, ubah juga margin-leftnilainya menjadi sama. Ini akan membuat panah tetap di tengah.
The border-colordigunakan untuk mengubah konten menjadi panah. Kami mengatur batas atas menjadi hitam, dan sisanya menjadi transparan. Jika semua sisinya hitam, Anda akan mendapatkan kotak persegi hitam.
Contoh ini menunjukkan cara menambahkan panah ke bagian atas tooltip. Perhatikan bahwa kita mengatur warna batas bawah kali ini:
Panah Atas
.tooltip .tooltiptext::after {
content: " ";
position: absolute;
bottom: 100%; /* At the top of the tooltip */
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent transparent black transparent;
}
Hasil:
Contoh ini menunjukkan cara menambahkan panah di sebelah kiri tooltip:
Panah Kiri
.tooltip .tooltiptext::after {
content: " ";
position: absolute;
top: 50%;
right: 100%; /* To the left of the tooltip
*/
margin-top: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent black transparent transparent;
}
Hasil:
Contoh ini menunjukkan cara menambahkan panah di sebelah kanan tooltip:
Panah kanan
.tooltip .tooltiptext::after {
content: " ";
position: absolute;
top: 50%;
left: 100%; /* To the right of the
tooltip */
margin-top: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent transparent transparent black;
}
Hasil:
Fade In Tooltips (Animasi)
Jika Anda ingin memudarkan teks tooltip saat akan terlihat, Anda dapat menggunakan transitionproperti CSS bersama dengan opacity
properti, dan beralih dari tidak terlihat sama sekali menjadi 100% terlihat, dalam beberapa detik yang ditentukan (1 detik di contoh):
Contoh
.tooltip .tooltiptext {
opacity: 0;
transition: opacity 1s;
}
.tooltip:hover
.tooltiptext {
opacity: 1;
}