Ringkasan dasar tentang cara mem-build elemen kustom tooltip yang adaptif terhadap warna dan mudah diakses.
Dalam postingan ini, saya ingin membagikan pemikiran saya tentang cara membuat elemen kustom <tool-tip>
yang adaptif terhadap warna dan mudah diakses. Coba demo dan lihat sumbernya.
Jika Anda lebih suka video, berikut versi YouTube dari postingan ini:
Ringkasan
Tooltip adalah overlay non-modal, non-blocking, dan non-interaktif yang berisi informasi tambahan untuk antarmuka pengguna. Elemen ini disembunyikan secara default dan menjadi tidak disembunyikan saat elemen terkait diarahkan kursor atau difokuskan. Tooltip tidak dapat dipilih atau berinteraksi secara langsung. Tooltip bukan pengganti label atau informasi bernilai tinggi lainnya. Pengguna harus dapat menyelesaikan tugasnya sepenuhnya tanpa tooltip.
Toggletip vs Tooltip
Seperti banyak komponen, ada berbagai deskripsi tentang tooltip, misalnya di MDN, WAI ARIA, Sarah Higley, dan Komponen Inklusif. Saya suka pemisahan antara tooltip dan toggletip. Tooltip harus berisi informasi tambahan non-interaktif, sedangkan toggletip dapat berisi interaksi dan informasi penting. Alasan utama pemisahan ini adalah aksesibilitas, bagaimana pengguna diharapkan membuka pop-up dan memiliki akses ke informasi dan tombol di dalamnya. Toggletip menjadi rumit dengan cepat.
Berikut adalah video toggletip dari situs Designcember; overlay dengan interaktivitas yang dapat disematkan pengguna untuk membuka dan menjelajahi, lalu ditutup dengan tombol tutup ringan atau tombol escape:
Tantangan GUI ini menggunakan tooltip, yang ingin melakukan hampir semua hal dengan CSS, dan berikut cara membuatnya.
Markup
Saya memilih untuk menggunakan elemen kustom <tool-tip>
. Penulis tidak perlu membuat elemen
kustom menjadi komponen web jika tidak ingin. Browser akan memperlakukan
<foo-bar>
seperti <div>
. Anda dapat menganggap elemen kustom seperti
nama class dengan tingkat kekhususan yang lebih rendah. Tidak ada JavaScript yang terlibat.
<tool-tip>A tooltip</tool-tip>
Ini seperti div dengan beberapa teks di dalamnya. Kita dapat mengaitkan ke hierarki aksesibilitas pembaca layar yang mampu dengan menambahkan [role="tooltip"]
.
<tool-tip role="tooltip">A tooltip</tool-tip>
Sekarang, untuk pembaca layar, elemen ini dikenali sebagai tooltip. Lihat dalam contoh berikut bagaimana elemen link pertama memiliki elemen tooltip yang dikenali dalam hierarkinya dan elemen kedua tidak? Akun kedua tidak memiliki peran tersebut. Di bagian gaya, kita akan meningkatkan tampilan hierarki ini.
Selanjutnya, kita perlu tooltip agar tidak dapat difokuskan. Jika pembaca layar tidak
memahami peran tooltip, pengguna dapat memfokuskan <tool-tip>
untuk
membaca konten, dan pengalaman pengguna tidak memerlukannya. Pembaca layar
akan menambahkan konten ke elemen induk sehingga tidak perlu fokus
agar dapat diakses. Di sini, kita dapat menggunakan inert
untuk memastikan tidak ada pengguna yang
tidak sengaja menemukan konten tooltip ini dalam alur tab mereka:
<tool-tip inert role="tooltip">A tooltip</tool-tip>
Kemudian, saya memilih untuk menggunakan atribut sebagai antarmuka untuk menentukan posisi
tooltip. Secara default, semua <tool-tip>
akan memiliki posisi "atas", tetapi
posisi dapat disesuaikan pada elemen dengan menambahkan tip-position
:
<tool-tip role="tooltip" tip-position="right ">A tooltip</tool-tip>
Saya cenderung menggunakan atribut, bukan class, untuk hal-hal seperti ini sehingga
<tool-tip>
tidak dapat memiliki beberapa posisi yang ditetapkan secara bersamaan.
Hanya boleh ada satu atau tidak ada sama sekali.
Terakhir, tempatkan elemen <tool-tip>
di dalam elemen yang ingin Anda berikan
tooltip. Di sini, saya membagikan teks alt
kepada pengguna yang dapat melihat dengan menempatkan gambar
dan <tool-tip>
di dalam
elemen
<picture>
:
<picture>
<img alt="The GUI Challenges skull logo" width="100" src="...">
<tool-tip role="tooltip" tip-position="bottom">
The <b>GUI Challenges</b> skull logo
</tool-tip>
</picture>
Di sini saya menempatkan <tool-tip>
di dalam elemen
<abbr>
:
<p>
The <abbr>HTML <tool-tip role="tooltip" tip-position="top">Hyper Text Markup Language</tool-tip></abbr> abbr element.
</p>
Aksesibilitas
Karena saya telah memilih untuk membuat tooltip, bukan toggletip, bagian ini jauh lebih sederhana. Pertama, izinkan saya menguraikan pengalaman pengguna yang kita inginkan:
- Di ruang yang terbatas atau antarmuka yang berantakan, sembunyikan pesan tambahan.
- Saat pengguna mengarahkan kursor, memfokuskan, atau menggunakan sentuh untuk berinteraksi dengan elemen, tampilkan pesan.
- Saat pengarahan kursor, fokus, atau sentuhan berakhir, sembunyikan pesan lagi.
- Terakhir, pastikan gerakan apa pun dikurangi jika pengguna telah menentukan preferensi untuk gerakan yang dikurangi.
Tujuan kami adalah pesan tambahan on demand. Pengguna mouse atau keyboard yang dapat melihat dapat mengarahkan kursor untuk menampilkan pesan, lalu membacanya dengan mata. Pengguna pembaca layar yang tidak dapat melihat dapat berfokus untuk menampilkan pesan, yang diterima secara lisan melalui alat mereka.
Di bagian sebelumnya, kita telah membahas hierarki aksesibilitas, peran tooltip, dan inert. Yang tersisa adalah mengujinya dan memverifikasi pengalaman pengguna yang sesuai untuk menampilkan pesan tooltip kepada pengguna. Setelah pengujian, tidak jelas bagian pesan yang dapat didengar mana yang merupakan tooltip. Hal ini juga dapat dilihat saat men-debug di hierarki aksesibilitas, teks link "top" dijalankan bersama, tanpa ragu-ragu, dengan "Lihat, tooltip!". Pembaca layar tidak memisahkan atau mengidentifikasi teks sebagai konten tooltip.
Tambahkan elemen pseudo khusus pembaca layar ke <tool-tip>
dan kita dapat menambahkan
teks perintah kita sendiri untuk pengguna tunanetra.
&::before {
content: "; Has tooltip: ";
clip: rect(1px, 1px, 1px, 1px);
clip-path: inset(50%);
height: 1px;
width: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
}
Di bawah ini, Anda dapat melihat hierarki aksesibilitas yang diperbarui, yang kini memiliki titik koma setelah teks link dan perintah untuk tooltip "Memiliki tooltip: ".
Sekarang, saat pengguna pembaca layar memfokuskan link, pembaca layar akan mengucapkan "top" dan berhenti sejenak, lalu mengumumkan "has tooltip: look, tooltips". Hal ini memberi pengguna pembaca layar beberapa petunjuk UX yang bagus. Hesitation memberikan pemisahan yang baik antara teks link dan tooltip. Selain itu, saat "has tooltip" diumumkan, pengguna pembaca layar dapat dengan mudah membatalkannya jika sudah pernah mendengarnya. Tindakan ini sangat mengingatkan pada tindakan mengarahkan kursor dan menghapus kursor dengan cepat, karena Anda telah melihat pesan tambahan. Hal ini terasa seperti paritas UX yang bagus.
Gaya
Elemen <tool-tip>
akan menjadi turunan dari elemen yang mewakili pesan tambahannya, jadi mari kita mulai dengan hal-hal penting untuk efek overlay. Keluarkan dari alur dokumen dengan position absolute
:
tool-tip {
position: absolute;
z-index: 1;
}
Jika induknya bukan konteks penumpukan, tooltip akan memosisikan dirinya ke
yang terdekat, yang bukan yang kita inginkan. Ada pemilih baru di
blok yang dapat membantu, :has()
:
:has(> tool-tip) {
position: relative;
}
Jangan terlalu khawatir dengan dukungan browser. Pertama, ingat bahwa tooltip ini
adalah tambahan. Jika tidak berhasil, tidak apa-apa. Kedua, di bagian JavaScript, kita akan men-deploy skrip untuk melakukan polyfill pada fungsi yang kita perlukan untuk browser tanpa dukungan :has()
.
Selanjutnya, mari kita buat tooltip tidak interaktif sehingga tidak mencuri peristiwa pointer dari elemen induknya:
tool-tip {
…
pointer-events: none;
user-select: none;
}
Kemudian, sembunyikan tooltip dengan opasitas sehingga kita dapat mentransisikan tooltip dengan crossfade:
tool-tip {
opacity: 0;
}
:has(> tool-tip):is(:hover, :focus-visible, :active) > tool-tip {
opacity: 1;
}
:is()
dan :has()
melakukan
pekerjaan berat di sini, sehingga tool-tip
yang berisi elemen induk mengetahui
interaksi pengguna untuk mengalihkan visibilitas tooltip turunan. Pengguna mouse
dapat mengarahkan kursor, pengguna keyboard dan pembaca layar dapat berfokus, dan pengguna sentuh dapat mengetuk.
Dengan overlay tampilkan dan sembunyikan yang berfungsi untuk pengguna yang dapat melihat, saatnya menambahkan beberapa gaya untuk tema, posisi, dan menambahkan bentuk segitiga ke balon. Gaya berikut mulai menggunakan properti kustom, yang dibuat berdasarkan apa yang telah kita lakukan sejauh ini, tetapi juga menambahkan bayangan, tipografi, dan warna sehingga terlihat seperti tooltip yang mengambang:
tool-tip {
--_p-inline: 1.5ch;
--_p-block: .75ch;
--_triangle-size: 7px;
--_bg: hsl(0 0% 20%);
--_shadow-alpha: 50%;
--_bottom-tip: conic-gradient(from -30deg at bottom, rgba(0,0,0,0), #000 1deg 60deg, rgba(0,0,0,0) 61deg) bottom / 100% 50% no-repeat;
--_top-tip: conic-gradient(from 150deg at top, rgba(0,0,0,0), #000 1deg 60deg, rgba(0,0,0,0) 61deg) top / 100% 50% no-repeat;
--_right-tip: conic-gradient(from -120deg at right, rgba(0,0,0,0), #000 1deg 60deg, rgba(0,0,0,0) 61deg) right / 50% 100% no-repeat;
--_left-tip: conic-gradient(from 60deg at left, rgba(0,0,0,0), #000 1deg 60deg, rgba(0,0,0,0) 61deg) left / 50% 100% no-repeat;
pointer-events: none;
user-select: none;
opacity: 0;
transform: translateX(var(--_x, 0)) translateY(var(--_y, 0));
transition: opacity .2s ease, transform .2s ease;
position: absolute;
z-index: 1;
inline-size: max-content;
max-inline-size: 25ch;
text-align: start;
font-size: 1rem;
font-weight: normal;
line-height: normal;
line-height: initial;
padding: var(--_p-block) var(--_p-inline);
margin: 0;
border-radius: 5px;
background: var(--_bg);
color: CanvasText;
will-change: filter;
filter:
drop-shadow(0 3px 3px hsl(0 0% 0% / var(--_shadow-alpha)))
drop-shadow(0 12px 12px hsl(0 0% 0% / var(--_shadow-alpha)));
}
/* create a stacking context for elements with > tool-tips */
:has(> tool-tip) {
position: relative;
}
/* when those parent elements have focus, hover, etc */
:has(> tool-tip):is(:hover, :focus-visible, :active) > tool-tip {
opacity: 1;
transition-delay: 200ms;
}
/* prepend some prose for screen readers only */
tool-tip::before {
content: "; Has tooltip: ";
clip: rect(1px, 1px, 1px, 1px);
clip-path: inset(50%);
height: 1px;
width: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
}
/* tooltip shape is a pseudo element so we can cast a shadow */
tool-tip::after {
content: "";
background: var(--_bg);
position: absolute;
z-index: -1;
inset: 0;
mask: var(--_tip);
}
/* top tooltip styles */
tool-tip:is(
[tip-position="top"],
[tip-position="block-start"],
:not([tip-position]),
[tip-position="bottom"],
[tip-position="block-end"]
) {
text-align: center;
}
Penyesuaian tema
Tooltip hanya memiliki beberapa warna untuk dikelola karena warna teks diwarisi dari
halaman melalui kata kunci sistem CanvasText
. Selain itu, karena kita telah membuat properti
kustom untuk menyimpan nilai, kita hanya dapat memperbarui properti kustom tersebut dan
membiarkan tema menangani sisanya:
@media (prefers-color-scheme: light) {
tool-tip {
--_bg: white;
--_shadow-alpha: 15%;
}
}
Untuk tema terang, kita menyesuaikan latar belakang menjadi putih dan membuat bayangan jauh lebih lemah dengan menyesuaikan opasitas.
Kanan ke kiri
Untuk mendukung mode pembacaan dari kanan ke kiri, properti kustom akan menyimpan nilai arah dokumen ke nilai -1 atau 1.
tool-tip {
--isRTL: -1;
}
tool-tip:dir(rtl) {
--isRTL: 1;
}
Ini dapat digunakan untuk membantu memosisikan tooltip:
tool-tip[tip-position="top"]) {
--_x: calc(50% * var(--isRTL));
}
Serta membantu mengetahui lokasi segitiga:
tool-tip[tip-position="right"]::after {
--_tip: var(--_left-tip);
}
tool-tip[tip-position="right"]:dir(rtl)::after {
--_tip: var(--_right-tip);
}
Terakhir, juga dapat digunakan untuk transformasi logis pada translateX()
:
--_x: calc(var(--isRTL) * -3px * -1);
Pemosisi tooltip
Posisikan tooltip secara logis dengan properti inset-block
atau inset-inline
untuk menangani posisi tooltip fisik dan logis. Kode
berikut menunjukkan cara setiap empat posisi diberi gaya untuk
arah kiri ke kanan dan kanan ke kiri.
Perataan atas dan awal blok
tool-tip:is([tip-position="top"], [tip-position="block-start"], :not([tip-position])) {
inset-inline-start: 50%;
inset-block-end: calc(100% + var(--_p-block) + var(--_triangle-size));
--_x: calc(50% * var(--isRTL));
}
tool-tip:is([tip-position="top"], [tip-position="block-start"], :not([tip-position]))::after {
--_tip: var(--_bottom-tip);
inset-block-end: calc(var(--_triangle-size) * -1);
border-block-end: var(--_triangle-size) solid transparent;
}
Perataan kanan dan inline-end
tool-tip:is([tip-position="right"], [tip-position="inline-end"]) {
inset-inline-start: calc(100% + var(--_p-inline) + var(--_triangle-size));
inset-block-end: 50%;
--_y: 50%;
}
tool-tip:is([tip-position="right"], [tip-position="inline-end"])::after {
--_tip: var(--_left-tip);
inset-inline-start: calc(var(--_triangle-size) * -1);
border-inline-start: var(--_triangle-size) solid transparent;
}
tool-tip:is([tip-position="right"], [tip-position="inline-end"]):dir(rtl)::after {
--_tip: var(--_right-tip);
}
Perataan bawah dan akhir blok
tool-tip:is([tip-position="bottom"], [tip-position="block-end"]) {
inset-inline-start: 50%;
inset-block-start: calc(100% + var(--_p-block) + var(--_triangle-size));
--_x: calc(50% * var(--isRTL));
}
tool-tip:is([tip-position="bottom"], [tip-position="block-end"])::after {
--_tip: var(--_top-tip);
inset-block-start: calc(var(--_triangle-size) * -1);
border-block-start: var(--_triangle-size) solid transparent;
}
Perataan kiri dan inline-start
tool-tip:is([tip-position="left"], [tip-position="inline-start"]) {
inset-inline-end: calc(100% + var(--_p-inline) + var(--_triangle-size));
inset-block-end: 50%;
--_y: 50%;
}
tool-tip:is([tip-position="left"], [tip-position="inline-start"])::after {
--_tip: var(--_right-tip);
inset-inline-end: calc(var(--_triangle-size) * -1);
border-inline-end: var(--_triangle-size) solid transparent;
}
tool-tip:is([tip-position="left"], [tip-position="inline-start"]):dir(rtl)::after {
--_tip: var(--_left-tip);
}
Animasi
Sejauh ini, kita hanya mengalihkan visibilitas tooltip. Di bagian ini, kita akan menganimasikan opasitas terlebih dahulu untuk semua pengguna, karena ini adalah transisi gerakan yang dikurangi dan umumnya aman. Kemudian, kita akan menganimasikan posisi transformasi sehingga tooltip akan terlihat bergeser keluar dari elemen induk.
Transisi default yang aman dan bermakna
Buat gaya elemen tooltip untuk melakukan transisi opasitas dan transformasi, seperti ini:
tool-tip {
opacity: 0;
transform: translateX(var(--_x, 0)) translateY(var(--_y, 0));
transition: opacity .2s ease, transform .2s ease;
}
:has(> tool-tip):is(:hover, :focus-visible, :active) > tool-tip {
opacity: 1;
transition-delay: 200ms;
}
Menambahkan gerakan ke transisi
Untuk setiap sisi tempat tooltip dapat muncul, jika pengguna tidak keberatan dengan gerakan, posisikan properti translateX sedikit dengan memberinya jarak kecil untuk berpindah dari:
@media (prefers-reduced-motion: no-preference) {
:has(> tool-tip:is([tip-position="top"], [tip-position="block-start"], :not([tip-position]))):not(:hover):not(:focus-visible):not(:active) tool-tip {
--_y: 3px;
}
:has(> tool-tip:is([tip-position="right"], [tip-position="inline-end"])):not(:hover):not(:focus-visible):not(:active) tool-tip {
--_x: -3px;
}
:has(> tool-tip:is([tip-position="bottom"], [tip-position="block-end"])):not(:hover):not(:focus-visible):not(:active) tool-tip {
--_y: -3px;
}
:has(> tool-tip:is([tip-position="left"], [tip-position="inline-start"])):not(:hover):not(:focus-visible):not(:active) tool-tip {
--_x: 3px;
}
}
Perhatikan bahwa ini menetapkan status "keluar", karena status "masuk" berada di translateX(0)
.
JavaScript
Menurut saya, JavaScript bersifat opsional. Hal ini karena tidak ada tooltip
ini yang harus dibaca untuk menyelesaikan tugas di UI Anda. Jadi, jika
tooltip benar-benar gagal, seharusnya tidak masalah. Hal ini juga berarti kita dapat memperlakukan
tooltip sebagai peningkatan bertahap. Pada akhirnya, semua browser akan mendukung
:has()
dan skrip ini dapat dihapus sepenuhnya.
Skrip polyfill melakukan dua hal, dan hanya melakukannya jika browser tidak
mendukung :has()
. Pertama, periksa dukungan :has()
:
if (!CSS.supports('selector(:has(*))')) {
// do work
}
Selanjutnya, temukan elemen induk <tool-tip>
dan beri nama class untuk
digunakan:
if (!CSS.supports('selector(:has(*))')) {
document.querySelectorAll('tool-tip').forEach(tooltip =>
tooltip.parentNode.classList.add('has_tool-tip'))
}
Selanjutnya, masukkan kumpulan gaya yang menggunakan nama class tersebut, yang menyimulasikan pemilih :has()
untuk perilaku yang sama persis:
if (!CSS.supports('selector(:has(*))')) {
document.querySelectorAll('tool-tip').forEach(tooltip =>
tooltip.parentNode.classList.add('has_tool-tip'))
let styles = document.createElement('style')
styles.textContent = `
.has_tool-tip {
position: relative;
}
.has_tool-tip:is(:hover, :focus-visible, :active) > tool-tip {
opacity: 1;
transition-delay: 200ms;
}
`
document.head.appendChild(styles)
}
Hanya itu, sekarang semua browser akan dengan senang hati menampilkan tooltip jika :has()
tidak
didukung.
Kesimpulan
Setelah Anda mengetahui cara saya melakukannya, bagaimana cara Anda melakukannya? 🙂 Saya sangat menantikan
popup
API untuk mempermudah toggletips, lapisan
atas agar tidak ada pertempuran
z-index, dan
anchor
API untuk memosisikan berbagai hal di jendela dengan lebih baik. Sebelum itu, saya akan membuat
tooltip.
Mari kita diversifikasi pendekatan dan pelajari semua cara untuk mem-build di web.
Buat demo, tweet link-nya, dan saya akan menambahkannya ke bagian remix komunitas di bawah.
Remix komunitas
Belum ada apa-apa di sini.
Resource
- Kode sumber di GitHub