Buat tooltips dengan CSS.
Contoh Tooltip: Demo
Sebuah tooltip sering digunakan untuk menentukan informasi tambahan tentang sesuatu ketika pengguna menggerakkan pointer mouse di atas unsur:
Tooltip dasar
Buat tooltip yang muncul saat pengguna bergerak mouse 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> Cobalah sendiri " misalnya Dijelaskan
HTML) Gunakan elemen kontainer (seperti <div> ) dan menambahkan "tooltip" kelas untuk itu. Ketika mouse pengguna lebih dari ini <div> , ia akan menampilkan teks tooltip.
Teks tooltip ditempatkan di dalam sebuah elemen inline (seperti <span> ) dengan class="tooltiptext" .
CSS) The tooltip menggunakan kelas position:relative , yang diperlukan untuk posisi teks tooltip ( position:absolute .) Catatan: Lihat contoh di bawah ini tentang bagaimana posisi tooltip.
The tooltiptext kelas memegang teks tooltip yang sebenarnya. Tersembunyi secara default, dan akan terlihat di hover (lihat di bawah). Kami juga telah menambahkan beberapa gaya dasar untuk itu: lebar 120px, warna latar belakang hitam, warna text putih, teks berpusat, dan 5px atas dan padding bawah.
CSS3 border-radius properti yang digunakan untuk menambahkan sudut dibulatkan ke teks tooltip.
The :hover pemilih digunakan untuk menampilkan teks tooltip ketika pengguna menggerakkan mouse di atas <div> dengan class="tooltip" .
positioning Tooltips
Dalam contoh ini, tooltip ditempatkan ke kanan (left:105%) dari "hoverable" teks (<div>) . Juga mencatat bahwa top:-5px digunakan untuk menempatkannya di tengah-tengah elemen wadah. Kami menggunakan nomor 5 karena teks tooltip memiliki padding atas dan bawah 5px. Jika Anda meningkatkan bantalan nya, juga meningkatkan nilai dari top properti untuk memastikan bahwa hal itu tetap di tengah (jika ini adalah sesuatu yang Anda inginkan). Hal yang sama berlaku jika Anda ingin tooltip ditempatkan ke kiri.
Tooltip tepat
.tooltip .tooltiptext {
top: -5px;
left:
105%;
}
Hasil:
kiri Tooltip
.tooltip .tooltiptext {
top: -5px;
right:
105%;
}
Hasil:
Jika Anda ingin tooltip muncul di atas atau di bawah, lihat contoh di bawah. Perhatikan bahwa kita menggunakan margin-left properti dengan nilai minus 60 piksel. Hal ini untuk pusat tooltip atas / bawah teks hoverable. Hal ini diatur ke setengah dari lebar tooltip ini (120/2 = 60).
Top Tooltip
.tooltip .tooltiptext {
width: 120px;
bottom: 100%;
left:
50%;
margin-left: -60px; /* Use half of the width
(120/2 = 60), to center the tooltip */
}
Hasil:
bawah Tooltip
.tooltip .tooltiptext {
width: 120px;
top: 100%;
left:
50%;
margin-left: -60px; /* Use half of the width
(120/2 = 60), to center the tooltip */
}
Hasil:
Arrows tooltip
Untuk membuat panah yang harus muncul dari sisi tertentu dari tooltip, tambahkan "kosong" konten setelah tooltip, dengan kelas pseudo-elemen ::after bersama-sama dengan content properti. Panah itu sendiri dibuat dengan menggunakan batas. Ini akan membuat tooltip terlihat seperti gelembung pidato.
Contoh ini menunjukkan bagaimana untuk menambahkan panah ke bawah tooltip:
bawah Panah
.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:
misalnya Dijelaskan
Posisi panah dalam tooltip: top: 100% akan menempatkan tanda panah di bagian bawah tooltip. left: 50% akan berpusat panah.
Catatan: border-width properti menentukan ukuran panah. Jika Anda mengubah ini, juga mengubah margin-left nilai yang sama. Ini akan menjaga panah berpusat.
The border-color digunakan untuk mengubah konten ke panah. Kami menetapkan batas atas untuk hitam, dan sisanya untuk transparan. Jika semua pihak yang hitam, Anda akan berakhir dengan kotak persegi hitam.
Contoh ini menunjukkan bagaimana untuk menambahkan panah ke atas tooltip. Perhatikan bahwa kita mengatur warna border bawah saat ini:
Top Panah
.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 bagaimana untuk menambahkan panah di sebelah kiri tooltip:
Left Arrow
.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 bagaimana untuk 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 (Animation)
Jika Anda ingin memudar dalam teks tooltip ketika itu adalah tentang menjadi terlihat, Anda dapat menggunakan CSS3 transition properti bersama-sama dengan opacity properti, dan pergi dari menjadi benar-benar terlihat 100% terlihat, di sejumlah detik tertentu (1 detik pada contoh kita):
Contoh
.tooltip .tooltiptext {
opacity: 0;
transition: opacity 1s;
}
.tooltip:hover
.tooltiptext {
opacity: 1;
} Cobalah sendiri " Catatan: Anda akan belajar lebih banyak tentang transisi dan animasi kemudian di tutorial kami.