提示工具 CSS
Buat tip (Tooltip) melalui CSS.
Contoh: Tip
实例
Tip biasanya digunakan untuk menyediakan informasi ekstra tentang konten saat pengguna memindahkan kursor mouse ke atas elemen:
Tip dasar
Buat satu tip yang muncul saat mouse diatas elemen:
实例
<style>
/* Wadah tip */
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black; /* Jika ingin menampilkan garis titik di bawah teks yang dapat disentuh */
}
/* Teks tip */
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
padding: 5px 0;
border-radius: 6px;
/* Lokasi teks tip - lihat contoh di bawah */
position: absolute;
z-index: 1;
}
/* Menampilkan teks tip saat kursor mouse diatas wadah tip */
.tooltip:hover .tooltiptext {
visibility: visible;
}
</style>
<div class="tooltip">Tolong klik di sini</div>
<span class="tooltiptext">Teks tip</span>
</div>
例子解释
HTML：
Dengan elemen kontainer (seperti <div>) dan menambahkan "tooltip" Kelas. Ketika pengguna menghover 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 bagaimana untuk menempatkan tooltip, lihat contoh di bawah.
tooltiptext Kelas menyimpan teks tooltip yang sebenarnya. Secara lalai ia tersembunyi dan akan terlihat saat kursor dihover (lihat di bawah). Kami juga menambahkan beberapa gaya dasar: lebar 120 piksel, latar belakang hitam, teks putih, teks di tengah serta marjin atas dan bawah 5px (padding).
CSS border-radius Atribut untuk menambahkan rounding ke teks tooltip.
Ketika pengguna memindahkan kursor ke <div> dengan class="tooltip",:hover Pemilih untuk menampilkan teks tooltip.
Penggunaan tooltip
Dalam contoh ini, tooltip berada di sebelah kanan teks yang dapat dihantar (left:105%）。Lainnya, perhatikan bahwatop:-5px Digunakan untuk menempatkan di tengah elemen kontainer. Kami menggunakan angka 5 karena teks tooltip mempunyai marjin atas dan bawah 5px. Jika anda meningkatkan marjin dalam, silakan tambahkan top Nilai atribut untuk memastikan ia tetap di tengah. Juga berlaku jika anda ingin letakkan tooltip di kiri.
Tooltip kanan
.tooltip .tooltiptext {
top: -5px;
left: 105%;
}
结果：
Tooltip kiri
.tooltip .tooltiptext {
top: -5px;
right: 105%;
}
结果：
Jika anda mahu tooltip berada di atas atau bawah, lihat contoh di bawah. Perhatikan, kami menggunakan atribut marjin kiri negatif 60 piksel (margin-left). Ini untuk menengahkan tooltip dengan teks yang dapat dihantar. 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 */
}
结果：
Tooltip bawah
.tooltip .tooltiptext {
width: 120px;
top: 100%;
left: 50%;
margin-left: -60px; /* Gunakan setengah lebar (120/2 = 60), untuk menengahkan tooltip */
}
结果：
Tanda panah tooltip
Jika anda mahu membuat tanda panah yang muncul di sisi yang ditentukan tooltip, tambahkan konten 'kosong' di belakang tooltip dan gunakan klip psuedo-element. ::after 和 content 属性。箭头本身是使用边框创建的。这会使工具提示看起来像气泡。
本例演示如何在工具提示的底部添加箭头：
底部箭头
.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;
}
结果：
例子解释
将箭头定位在工具提示内：top: 100% 将箭头放置在工具提示的底部。left: 50% 将使箭头居中。
注意：border-width 属性指定箭头的大小。如果您更改此设置，也请将 margin-left 值更改为相同值。这将使箭头居中。
border-color 用于将内容转换为箭头。我们将上边框设置为黑色，其余设置为透明。如果所有面都是黑色，则最终将得到一个黑色的方形框。
本例演示了如何在工具提示的顶部添加箭头。请注意，这次我们设置了下边框的颜色：
顶部箭头
.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;
}
结果：
本例演示如何在工具提示的左侧添加箭头：
左侧箭头
.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;
}
结果：
本例演示如何在工具提示的右侧添加箭头：
右侧箭头
.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;
}
结果：
淡入的工具提示（动画）
如果希望在即将显示的工具提示文本中淡入淡出，可以将 CSS transition 属性与 opacity 属性一同使用，并在指定的秒数（例子中是 1 秒）内从完全不可见变为 100％ 可见：
实例
.tooltip .tooltiptext {
opacity: 0;
transition: opacity 1s;
}
.tooltip:hover .tooltiptext {
opacity: 1;
}
