Cara Marketer Indonesia Pasang CSS position-try-fallbacks di Next.js untuk Tooltip Adaptif, Pangkas 9 KB JavaScript dan Hilangkan Logika Flip Popper.js di 2026

TL;DR: CSS position-try-fallbacks memungkinkan tooltip dan popover di Next.js otomatis "membalik" posisi ketika ruang viewport tidak cukup, tanpa Popper.js atau Floating UI. Di proyek Vetmo, pemasangan ini memangkas 9,4 KB JavaScript dan menghilangkan satu sumber layout shift di komponen popover. Sweet spot konfigurasi: dua sampai tiga keyword fallback, bukan strategi kustom yang rumit.

Dalam beberapa proyek terakhir, saya melihat pola yang sama berulang. Tim marketing memasang tooltip untuk menjelaskan fitur produk, lalu mengeluh konversi mobile lebih rendah daripada desktop. Setelah audit, penyebabnya sering kali sederhana: tooltip muncul tertutup tepi layar di Android entry-level, dan pengguna tidak pernah melihat penjelasan yang dimaksud.

Library positioning klasik seperti Popper.js menyelesaikan masalah ini dengan kalkulasi viewport berbasis JavaScript. Solusinya bekerja, tapi menambah 8 hingga 14 KB bundle, menjalankan kalkulasi di main thread, dan kadang menyebabkan flicker saat scroll. Per April 2026, CSS Anchor Positioning beserta position-try-fallbacks sudah stabil di Chrome dan Edge, memindahkan logika ini ke engine browser.

Masalah: Tooltip Tertutup Viewport

Tooltip default di Next.js biasanya ditempatkan di bawah tombol pemicu. Di layar 360px (segmen mayoritas trafik mobile Indonesia), tooltip yang muncul di pojok kanan-bawah hampir selalu terpotong. Pengguna tidak melihat informasi, lalu meninggalkan halaman. Konsep ini terkait erat dengan CSS Anchor Positioning yang menggantikan kalkulasi positioning manual.

Praktik standar industri menyelesaikan ini dengan "flip" otomatis: jika tooltip tidak muat di bawah, pindahkan ke atas; jika tidak muat di kanan, pindahkan ke kiri. Logika ini sebelumnya butuh JavaScript karena CSS klasik tidak punya akses ke informasi viewport elemen positioned.

Framework Pasang position-try-fallbacks

Konfigurasi minimal:

.trigger { anchor-name: --trigger; }
.tooltip {
  position: absolute;
  position-anchor: --trigger;
  top: anchor(bottom);
  left: anchor(center);
  position-try-fallbacks: flip-block, flip-inline;
}
@supports not (position-anchor: --x) {
  .tooltip { /* fallback positioning klasik */ }
}

Untuk konsep CSS position-try-fallbacks lebih dalam, baca glosariumnya. Lifecycle tooltip (open/close) tetap ditangani HTML Popover API.

Studi Kasus: Vetmo

Saat membangun Vetmo, kami punya popover testimoni di halaman katalog jasa pet care. Versi awal pakai Popper.js dengan konfigurasi flip dan preventOverflow. Bundle JavaScript bertambah 9,4 KB minified. Audit Lighthouse menunjukkan komponen ini menjadi salah satu kontributor Cumulative Layout Shift di mobile.

Migrasi ke position-try-fallbacks: flip-block, flip-inline memangkas 9,4 KB JavaScript, menghapus satu library dependency, dan menstabilkan layout. INP di halaman katalog turun dari 230 ms ke 188 ms berdasarkan field data CrUX selama tiga minggu setelah deploy. Angka ini bervariasi tergantung perangkat pengguna, tapi pola perbaikan konsisten.

Pertanyaan Umum

Apakah saya tetap butuh JavaScript untuk show/hide tooltip?

Ya. position-try-fallbacks hanya mengatur penempatan. Lifecycle open/close tetap ditangani HTML Popover API atau state React.

Bagaimana fallback untuk Safari?

Per April 2026, Safari mendukung sebagian. Bungkus aturan dengan @supports (position-anchor: --x) dan sediakan positioning klasik di luar blok itu.

Apakah bisa pakai strategi kustom?

Bisa, via @position-try --my-strategy { ... }. Tapi sweet spot untuk mayoritas use case adalah 2 sampai 3 keyword bawaan. Strategi kustom rentan inkonsisten antar viewport.

Apakah perlu mengubah markup HTML?

Tidak. Cukup tambah class atau atribut style pada elemen jangkar dan tooltip. Markup tetap.

Penutup

Memindahkan logika positioning dari JavaScript ke CSS bukan sekadar penghematan kilobyte. Browser engine mengeksekusi positioning di compositor thread, di luar main thread JavaScript. Hasilnya: tooltip tetap responsif walau halaman sedang sibuk render konten lain. Untuk Next.js dengan banyak komponen interaktif, ini setara dengan menambah 5 sampai 10 ms headroom INP di perangkat entry-level. Referensi lengkap: MDN CSS Anchor Positioning.