Pola Dunia Nyata Tooltip Pelacakan Status
Terapkan data-* untuk tooltip, status aktif, dan konfigurasi komponen.
Pola Dunia Nyata Tooltip Pelacakan Status adalah pelajaran HTML Academy gratis di CoddyKit. Ini adalah pelajaran 4 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar HTML Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus HTML Academy mencakup 4 pelajaran total.
Tooltip dengan data-tooltip
Simpan teks tooltip dalam data-tooltip pada elemen pemicu. CSS [data-tooltip]:hover::after { content: attr(data-tooltip) } menampilkannya tanpa JavaScript. Untuk tooltip yang aksesibel, tambahkan role="tooltip" dan aria-describedby yang menunjuk ke elemen nyata.
Memposisikan Tooltip CSS
Pemicu memerlukan position: relative. Elemen semu ::after menggunakan position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%) untuk memusatkan tooltip di atas pemicu. Tambahkan white-space: nowrap agar teks tidak terbungkus.
Melacak Status dengan data-state
Gantikan beberapa kelas boolean (is-open, is-loading, is-error) dengan satu atribut data-state: el.dataset.state = "loading". CSS memilih [data-state="loading"] — satu atribut, satu aturan CSS untuk setiap status, tanpa pengelolaan kelas.
Accordion dengan data-expanded
Setiap item accordion memiliki data-expanded="false". JavaScript mengubah nilainya: item.dataset.expanded = item.dataset.expanded === "true" ? "false" : "true". CSS menampilkan atau menyembunyikan panel: [data-expanded="false"] .panel { display: none; }.
Status Tab active
Wadah tab menyimpan tab active: data-active-tab="0". JavaScript memperbarui nilai ini saat diklik. CSS dapat memilih panel active menggunakan [data-active-tab="0"] #panel-0. Seluruh status tab berada dalam satu atribut pada elemen wadah.
Melacak Langkah Formulir
Formulir multilangkah menyimpan langkah saat ini dalam data-step pada elemen formulir. CSS hanya menampilkan langkah yang sesuai: form[data-step="2"] .step-2 { display: block; }. Langkah lainnya tetap tersembunyi tanpa mengubah kelas untuk setiap langkah.
Pola Status Pemuatan
Tombol selama tindakan asinkron: btn.dataset.state = "loading" menonaktifkan interaksi dan menampilkan spinner melalui CSS. Setelah selesai, tetapkan btn.dataset.state = "idle". Satu atribut menggantikan tiga perubahan kelas terpisah dan pemeriksaan atribut disabled.
Pola Pegangan Seret
Tandai item yang dapat diseret dengan data-draggable="true" dan target pelepasan dengan data-droptarget="true". Pendengar peristiwa menggunakan selektor atribut untuk menemukan semua item yang dapat diseret: document.querySelectorAll("[data-draggable]"). Keberadaan atribut lebih semantis daripada nama kelas untuk menyatakan maksud perilaku.
Indikator Kemajuan
Komponen penunjuk langkah menggunakan data-step-status pada setiap langkah: "completed", "current", "upcoming". CSS memberikan gaya yang berbeda untuk setiap status. JavaScript menetapkan status setiap langkah berdasarkan posisi saat ini — status yang mudah dibaca tanpa objek status JavaScript yang harus disinkronkan.
Persistensi Tema
Simpan preferensi tema pengguna dalam localStorage dan terapkan saat dimuat: document.documentElement.dataset.theme = localStorage.getItem("theme") || "light". CSS memilih [data-theme="dark"] untuk mode gelap — persisten dan bebas FOUC saat skrip dijalankan di <head>.
Metadata Konten Dinamis
Daftar yang dirender server menyertakan metadata dalam atribut data: data-product-id, data-price, data-category. JavaScript membaca data ini tanpa panggilan API tambahan untuk pemfilteran, pengurutan, atau fungsi keranjang di sisi klien menggunakan data yang sudah dirender.
Pemeriksaan Pengetahuan
Apa keunggulan menggunakan data-state="loading" dibandingkan menambahkan atau menghapus kelas CSS?
Ringkasan
Atribut data-* memungkinkan pola dunia nyata yang andal: tooltip CSS dengan content:attr(), mesin status dengan data-state yang menggantikan beberapa pengalihan kelas, pelacakan formulir bertahap, persistensi tema melalui documentElement.dataset, dan metadata yang dirender server untuk fungsionalitas sisi klien—semuanya tanpa pencerminan status JavaScript.
Pertanyaan yang Sering Diajukan
Apakah pelajaran “Pola Dunia Nyata Tooltip Pelacakan Status” gratis?
Ya — teks lengkap “Pola Dunia Nyata Tooltip Pelacakan Status” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus HTML Academy, upgrade ke CoddyKit PRO. Kursus HTML Academy mencakup 4 pelajaran total.
Apa yang akan aku pelajari di “Pola Dunia Nyata Tooltip Pelacakan Status”?
Terapkan data-* untuk tooltip, status aktif, dan konfigurasi komponen. Kamu berlatih HTML Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.
Apakah aku perlu pengalaman untuk memulai HTML Academy?
Tidak diperlukan pengalaman sebelumnya. HTML Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 4 dari 4.
Berapa lama pelajaran “Pola Dunia Nyata Tooltip Pelacakan Status” memakan waktu?
Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.
Bisakah aku menulis dan menjalankan kode dalam pelajaran HTML Academy ini?
Ya. Setiap pelajaran HTML Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.
Semua pelajaran dalam kursus ini
- Sintaks data-* dan Konvensi Penamaan
- Mengakses data-* dengan dataset dalam JavaScript
- Menggunakan data-* dengan Pemilih Atribut CSS
- Pola Dunia Nyata Tooltip Pelacakan Status