Di halaman daftar pertanyaan untuk produk saya, Front Prep, saya menampilkan logo perusahaan di samping pertanyaan wawancara. Saat Anda mengarahkan kursor ke logo, tooltip menampilkan nama perusahaan. Saya telah mengatur penundaan tooltip menjadi 0, sehingga tooltip muncul secara instan saat saya menggerakkan kursor di halaman.
Untuk memperbaiki ini, saya menambahkan penundaan transisi 200ms, tetapi ini menciptakan masalah baru: berpindah di antara beberapa logo berarti menunggu penundaan 200ms yang sama setiap kali, yang terasa lambat. Posting ini tentang pola interaksi kecil yang ditemukan di bilah alat browser dan situs web. Solusi saya dibagi menjadi tiga bagian: saat mengarahkan kursor ke logo, tooltip menunggu 200ms sebelum terbuka.
Saat tooltip ditutup, timer 300ms dimulai, yang saya sebut jendela hangat. Jika Anda mengarahkan kursor ke logo lain saat timer ini berjalan, tooltip terbuka secara instan, melewati penundaan. Saat timer berakhir, halaman menjadi dingin, dan penundaan 200ms kembali.
Di Front Prep, tooltip saya dibangun dengan Radix dan Motion. Kode menggunakan variabel useContext untuk melacak status isWarm antara komponen. Saat mengarahkan kursor, komponen memeriksa apakah halaman hangat; jika ya, tooltip terbuka secara instan; jika tidak, ia memulai timer 200ms.
Fungsi show menyalin status hangat ke flag instan, yang digunakan CSS untuk melewati animasi masuk melalui atribut data. Pola ini meningkatkan pengalaman pengguna dengan menghindari popup instan dan penundaan yang lambat. Ini adalah pendekatan sederhana yang dapat Anda terapkan dalam basis kode Anda sendiri.
Entitas kunci: Perusahaan: Front Prep.
Sumber: Hacker News · Diringkas oleh HeadlinesBriefing