Tooltip CSS
- Hal Sebelumnya Animasi CSS
- Hal Berikutnya Gaya Gambar CSS
Buat Tooltip (Tooltip) melalui CSS.
Demo: Tooltip
Contoh
Tooltip biasanya digunakan untuk menyediakan informasi ekstra tentang konten saat pengguna memindahkan penanda mouse ke elemen:
Tooltip Dasar
Buat tooltip yang muncul saat mouse diarahkan ke elemen:
Contoh
<style>
/* Kontainer Tooltip */
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black; /* Menampilkan garis titik bawah jika perlu */
}
/* Teks Tooltip */
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
padding: 5px 0;
border-radius: 6px;
/* Lokasi teks tooltip - lihat contoh di bawah */
position: absolute;
z-index: 1;
}
/* Menampilkan teks tooltip saat mouse diarahkan ke kontainer tooltip */
.tooltip:hover .tooltiptext {
visibility: visible;
}
</style>
<div class="tooltip">Lihat saya</div>
<span class="tooltiptext">Teks Tooltip</span>
</div>
penjelasan contoh
HTML:
gunakan elemen wadah (seperti <div>) dan tambahkan "tooltip" Kelas. Ketika pengguna memindahkan mouse ke <div> ini, teks tooltip akan muncul.
Teks tooltip berada di class="tooltiptext" 嵌入式 elemen (seperti <span>)
CSS:
tooltip Kelas digunakan position:relativeuntuk menempatkan teks tooltip (position:absolute）。Perhatikan: tentang cara menempatkan tooltip, lihat contoh di bawah.
tooltiptext Kelas menyimpan teks tooltip yang sebenarnya. Secara default ia disembunyikan dan akan muncul saat mouse disusun (lihat di bawah). Kami juga menambahkan beberapa gaya dasar: lebar 120 piksel, latar belakang hitam, teks putih, teks di tengah serta margin atas dan bawah 5px (padding).
CSS border-radius Properti untuk menambahkan rounding ke teks tooltip.
Ketika pengguna memindahkan mouse ke <div> dengan class="tooltip",:hover Pemilihan yang digunakan untuk menampilkan teks tooltip.
Penempatan tooltip
Dalam contoh ini, tooltip berada di sebelah kanan teks yang dapat diarahkan (left:105%）。Lainnya, perhatikan bahwatop:-5px dipakai untuk menempatkan di tengah elemen wadahnya. Kami menggunakan angka 5 karena margin atas dan bawah teks tooltip adalah 5px. Jika Anda meningkatkan margin, jangan lupa meningkatkan top Nilai properti untuk memastikan bahwa ia tetap berada di tengah. Juga berlaku jika Anda ingin menempatkan tooltip di sebelah kiri.
Tooltip kanan
.tooltip .tooltiptext {
top: -5px;
left: 105%;
}
Hasil:
Tooltip kiri
.tooltip .tooltiptext {
top: -5px;
right: 105%;
}
Hasil:
Jika Anda ingin tooltip berada di atas atau bawah, lihat contoh di bawah. Perhatikan, kami menggunakan properti marjin kiri negatif 60 piksel (margin-left). Ini untuk menengahkan tooltip dengan teks yang dapat diarahkan. Nilainya adalah setengah lebar tooltip (120/2 = 60).
Tooltip atas
.tooltip .tooltiptext {
width: 120px;
bottom: 100%;
left: 50%;
margin-left: -60px; /* Gunakan setengah lebar (120/2 = 60), untuk menengahkan tooltip */
}
Hasil:
Tooltip bawah
.tooltip .tooltiptext {
width: 120px;
top: 100%;
left: 50%;
margin-left: -60px; /* Gunakan setengah lebar (120/2 = 60), untuk menengahkan tooltip */
}
Hasil:
Tanda panah tooltip
Untuk membuat tanda panah yang muncul di sisi yang ditentukan dari tooltip, tambahkan konten 'kosong' di belakang tooltip dan gunakan kelas pseudo-element. ::after dan content aturan. Panah itu sendiri dibuat menggunakan garis batas. Ini akan membuat tooltip terlihat seperti balon.
Contoh ini menunjukkan bagaimana menambahkan panah di bawah tooltip:
panah bawah
.tooltip .tooltiptext::after {
content: " ";
position: absolute;
top: 100%; /* Di bawah tooltip */
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: black transparent transparent transparent;
}
Hasil:
penjelasan contoh
menempatkan panah di dalam tooltip:top: 100% menempatkan panah di bawah tooltip.left: 50% akan membuat panah berada di tengah.
Perhatian:border-width aturan menentukan ukuran panah. Jika Anda mengubah pengaturan ini, juga harap Ubah margin-left nilai diubah menjadi nilai yang sama. Ini akan membuat panah berada di tengah.
border-color digunakan untuk mengubah konten menjadi panah. Kita mengatur garis atas menjadi hitam, sisanya menjadi transparan. Jika semua sisi adalah hitam, akhirnya Anda akan mendapatkan kotak hitam.
Contoh ini menunjukkan bagaimana menambahkan panah di atas tooltip. Perhatikan, kali ini kami mengatur warna bawah garis batas:
panah atas
.tooltip .tooltiptext::after {
content: " ";
position: absolute;
bottom: 100%; /* Di atas tooltip */
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent transparent black transparent;
}
Hasil:
Contoh ini menunjukkan bagaimana menambahkan panah di sebelah kiri tooltip:
panah kiri
.tooltip .tooltiptext::after {
content: " ";
position: absolute;
top: 50%;
right: 100%; /* Ke kiri tooltip */
margin-top: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent black transparent transparent;
}
Hasil:
Contoh ini menunjukkan bagaimana menambahkan panah di sebelah kanan tooltip:
panah kanan
.tooltip .tooltiptext::after {
content: " ";
position: absolute;
top: 50%;
left: 100%; /* Ke arah kanan tooltip */
margin-top: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent transparent transparent black;
}
Hasil:
Tooltip yang Berpencahayaan (Animasi)
Jika ingin memperkenalkan teks tool tip yang akan muncul dengan penyebaran, dapat menggunakan CSS transition Properti dengan opacity Properti yang digunakan bersamaan, dan berubah dalam waktu yang ditentukan (contoh adalah 1 detik) dari tak terlihat sepenuhnya menjadi 100% terlihat:
Contoh
.tooltip .tooltiptext {
opacity: 0;
transition: opacity 1s;
}
.tooltip:hover .tooltiptext {
opacity: 1;
}
- Hal Sebelumnya Animasi CSS
- Hal Berikutnya Gaya Gambar CSS
