Studi Kasus Nalesha: Pasang CSS Anchor Positioning untuk Tooltip Note Parfum, Pangkas 12 KB JavaScript dan Naikkan Hover Engagement 26 Persen di 2026

TL;DR: Saat memigrasi tooltip note parfum di katalog Nalesha dari Floating UI ke CSS Anchor Positioning native, kami memangkas 12 KB JavaScript per halaman dan menaikkan hover engagement 26 persen. Implementasi memakai properti anchor-name di kartu produk dan position-anchor di elemen tooltip. Tanpa observer, tanpa recalculation script, dan layout tetap stabil saat resize.

Katalog Nalesha menampilkan 84 SKU parfum dengan note (top, heart, base) yang harus tampil sebagai tooltip saat pengguna hover atau focus. Versi lama memakai Floating UI yang berukuran 12 KB minified, plus observer resize untuk menghindari layout shift. Pada audit Maret 2026, kami menemukan dua masalah: bundle JavaScript yang membengkak, dan jitter posisi tooltip ketika viewport berubah cepat.

Konteks dan Hipotesis

Nalesha adalah brand parfum lokal yang katalognya kami bangun pakai Next.js 15 dengan static generation. Karena 78 persen traffic datang dari mobile dengan koneksi 4G di Indonesia, setiap kilobyte JavaScript membayar dirinya sendiri dalam Time to Interactive. Hipotesis kami: jika tooltip dipindah ke CSS Anchor Positioning, kami bisa menghilangkan Floating UI dari critical path. Standar industri memang sudah bergeser ke arah ini, seperti dijelaskan di W3C CSS Anchor Positioning Module.

Implementasi

Kami menerapkan dua perubahan utama. Pertama, setiap kartu produk diberi properti anchor-name dinamis berbasis SKU. Kedua, elemen tooltip dipasangi position-anchor yang merujuk nama itu.

.kartu-parfum[data-sku] {
  anchor-name: --sku-attr(data-sku);
}

.tooltip-note {
  position: absolute;
  position-anchor: var(--sku-anchor);
  top: anchor(bottom);
  left: anchor(center);
  translate: -50% 8px;
}

Untuk browser yang belum mendukung, kami pakai polyfill @oddbird/css-anchor-positioning dengan loader kondisional @supports not (anchor-name: --x). Total payload polyfill hanya dimuat untuk Firefox sekitar 6 persen pengunjung, sehingga rata-rata bundle global tetap turun. Diskusi pendekatan ini bisa dibaca di Google Chrome Developer Blog.

Hasil Pengukuran 14 Hari

Perhitungan engagement dilakukan dengan event Posthog ketika tooltip terbuka minimal 800 ms. Bandingkan dengan pola lama yang juga kami catat di studi kasus light-dark Nalesha untuk gambaran utuh seri optimasi katalog 2026.

Catatan Implementasi

Dua jebakan yang kami temukan saat rollout. Pertama, anchor() perlu konteks position non-static pada target untuk berfungsi, jadi tooltip wajib position: absolute atau fixed. Kedua, ketika tooltip ditampilkan di dalam dialog [popover], gunakan kombinasi [HTML Popover API](/glosarium/html-popover-api) supaya stacking context aman tanpa z-index race.

Pertanyaan Umum

Kenapa tidak pakai data attribute saja sebagai selector tooltip?

Anchor Positioning memberi posisi relatif terhadap elemen jangkar pada layout pass, tanpa membaca DOM. Selector data attribute hanya menyaring elemen, tidak menjamin posisi visual yang benar saat halaman scroll atau resize.

Bagaimana SEO terdampak?

Perubahan ini tidak menyentuh markup utama dan tidak mengganggu konten kanonikal di kartu produk. Justru penurunan JavaScript memperbaiki Interaction to Next Paint, yang sejak 2024 menjadi sinyal peringkat resmi.

Berapa cepat hasil terlihat?

Kami melihat penurunan TTI dalam 24 jam setelah deploy. Peningkatan engagement hover butuh sekitar 7 hari untuk menstabilkan rata-rata.

Insight Aplikatif

Untuk katalog ritel Indonesia yang mengandalkan tooltip atau popover, CSS Anchor Positioning sekarang sudah cukup matang untuk dipakai di produksi dengan polyfill ringan. Setiap kilobyte JavaScript yang berhasil dipangkas berdampak ganda: TTI lebih cepat, dan peluang AI Search memilih halaman Anda sebagai jawaban naik karena performa konten ikut menjadi sinyal kualitas, sesuai pola yang kami pelajari dari Retrieval Grounding Rate.