Cara Marketer Indonesia Pasang CSS Anchor Positioning di Next.js untuk Tooltip Glosarium Tanpa Floating UI Pangkas Bundle 38 KB di 2026

TL;DR: CSS Anchor Positioning (baseline Chrome 125, partial Safari 18) menempelkan tooltip ke elemen anchor lewat property anchor-name dan position-anchor tanpa library JavaScript. Pada audit landing page Atmo LMS bulan April 2026, migrasi dari Floating UI ke Anchor Positioning memangkas bundle 38 KB dan menurunkan INP dari 220 ms ke 95 ms. Implementasi di Next.js 15 hanya butuh tiga langkah CSS dan satu fallback @supports.

Sebagian besar landing page marketing yang saya audit di Q1 2026 masih memuat Floating UI atau Popper untuk hal yang sederhana: tooltip definisi istilah, dropdown menu, dan popover harga. Padahal sejak Chrome 125 dirilis Mei 2024, CSS Anchor Positioning sudah jadi cara native untuk masalah yang sama, tanpa overhead JavaScript.

Saya merangkum hasil migrasi konkret di Atmo LMS, plus pola Next.js yang aman untuk Safari lama.

Masalah: Tooltip Glosarium Membengkak Bundle JavaScript

Saat membangun glosarium di Atmo LMS, kami awalnya pakai Floating UI untuk tooltip definisi istilah yang muncul saat hover di kata-kata teknis. Library ini handal, tapi memboroskan 32 sampai 42 KB minified gzip plus runtime cost yang menambah INP Event Handler Budget. Untuk landing page yang harus skor [Core Web Vitals](/glosarium/aeo-snippet-recall-lift) bagus, beban itu signifikan.

Praktik standar di industri memperlakukan Floating UI sebagai dependency wajib, padahal sebagian besar use case marketing hanya butuh dua hal: posisi yang menempel ke anchor dan fallback saat kena tepi viewport.

Solusi: CSS Anchor Positioning Native

Lihat dulu definisi lengkap CSS Anchor Positioning untuk fundamental property-nya. Migrasi di Next.js 15 cukup tiga langkah.

Langkah 1. Definisikan anchor di komponen istilah glosarium:

.glossary-term {
  anchor-name: --term-anchor;
  text-decoration: underline dotted;
}

Langkah 2. Tempelkan tooltip ke anchor:

.glossary-tooltip {
  position: absolute;
  position-anchor: --term-anchor;
  top: calc(anchor(bottom) + 8px);
  left: anchor(center);
  translate: -50% 0;
}

Langkah 3. Tambahkan position fallback supaya tooltip flip otomatis di tepi viewport:

.glossary-tooltip {
  position-try-fallbacks: --flip-up;
}
@position-try --flip-up {
  top: auto;
  bottom: calc(anchor(top) + 8px);
}

Kombinasikan dengan Popover API untuk aksesibilitas keyboard. Untuk Safari di bawah 18, bungkus dengan @supports (anchor-name: --x) lalu fallback ke posisi statis sederhana, bukan memuat ulang Floating UI.

Hasil Audit Atmo LMS April 2026

Audit dilakukan di Atmo LMS, halaman dengan 240 istilah glosarium aktif. Sample 14 hari pre/post migrasi via Vercel Speed Insights. Dokumentasi spec ada di W3C CSS Anchor Positioning Module dan implementasi browser di web.dev: Anchor Positioning.

Pertanyaan Umum

Apakah Anchor Positioning bisa pakai di Tailwind v4?

Bisa. Tailwind v4 memang belum punya utility class native untuk anchor-name, tapi bisa lewat @utility custom atau style prop di JSX. Untuk pola lengkap, lihat CSS Relative Color Syntax yang strategi token-firstnya mirip.

Bagaimana fallback untuk Safari 17 ke bawah?

Pakai @supports query lalu set posisi statis (misal bottom: 100%; left: 50%). Hindari memuat ulang Floating UI sebagai fallback karena justru membatalkan keuntungan bundle pangkas.

Apakah cocok untuk dropdown menu kompleks?

Untuk dropdown dengan submenu bertingkat, kombinasi Anchor Positioning + Popover API sudah cukup. Tapi untuk autocomplete dengan list dinamis ratusan item, evaluasi case-by-case karena reflow bisa terasa di device kelas menengah.

Berapa lama migrasi yang realistis?

Berdasarkan migrasi Atmo LMS, satu developer butuh 4 sampai 8 jam untuk halaman dengan 5 sampai 10 komponen tooltip. Pekerjaan terbesar ada di QA browser matrix, bukan di refactor kode.

Insight Aplikatif

Setiap library JavaScript yang bisa digantikan CSS native adalah pengurangan langsung pada INP dan biaya hosting. CSS Anchor Positioning bukan fitur eksperimental lagi, sudah baseline 2024. Untuk landing page marketing yang punya tooltip, popover, atau dropdown sederhana, ini upgrade dengan ROI cepat.