Cara Marketer Indonesia Pasang CSS Anchor Positioning di Next.js untuk Tooltip dan Popover, Pangkas 14 KB JavaScript Tanpa Floating UI di 2026

TL;DR: Pasang CSS Anchor Positioning di Next.js 15 dengan tiga langkah: tetapkan anchor-name pada elemen jangkar, sambungkan position-anchor dan anchor() di elemen target, tambahkan polyfill kondisional untuk Firefox. Hasil yang konsisten kami catat di tiga proyek klien: pemangkasan 9 sampai 14 KB JavaScript per halaman, layout shift hilang, dan tidak butuh observer resize.

Untuk marketer Indonesia yang juga ikut mengurus stack website, dependency JavaScript untuk komponen UI kecil seperti tooltip dan popover sering dianggap remeh. Padahal kumpulan kecil itu yang membuat bundle membengkak dan Time to Interactive lambat di koneksi 4G.

Masalah yang Diselesaikan

Pola lama untuk tooltip dan popover di Next.js mengandalkan Floating UI, Popper, atau Headless UI. Ketiganya menambah 8 sampai 14 KB JavaScript dan butuh observer untuk resize. Per Mei 2026, CSS Anchor Positioning sudah cukup matang untuk menggantikan kebanyakan kasus tersebut. Dukungan resmi tersedia di Chrome 125 ke atas dan Safari 18 sebagian, sesuai catatan di Can I Use Anchor Positioning.

Tiga Langkah Pemasangan

Langkah 1: Tetapkan Anchor di Elemen Sumber

Tambahkan properti anchor-name ke elemen yang menjadi titik referensi. Nama kustom diawali dua tanda hubung.

.tombol-cta {
  anchor-name: --cta-utama;
  position: relative;
}

Langkah 2: Posisikan Target dengan position-anchor

Gunakan position-anchor di elemen yang ingin di-anchor. Atribut posisi top, left, right, bottom memakai fungsi anchor() yang merujuk sisi jangkar.

.tooltip-harga {
  position: absolute;
  position-anchor: --cta-utama;
  top: anchor(bottom);
  left: anchor(center);
  translate: -50% 8px;
}

Langkah 3: Polyfill Kondisional untuk Firefox

Tambahkan polyfill di app/layout.tsx lewat script kondisional. Tujuannya supaya Firefox dan browser lama tetap mendapat perilaku setara tanpa memberatkan Chrome dan Safari.

// app/layout.tsx
<Script
  id="anchor-positioning-polyfill"
  src="https://unpkg.com/@oddbird/css-anchor-positioning@0.3.4"
  strategy="lazyOnload"
/>

Kombinasikan dengan [HTML Popover API](/glosarium/html-popover-api) untuk tooltip yang butuh top-layer agar tidak terjebak z-index. Pendekatan ini juga kami gunakan di proyek Vetmo seperti dijelaskan di studi kasus Vetmo Popover API.

Hasil Lintas Proyek

Dari tiga proyek klien yang sudah migrasi pada April sampai Mei 2026:

Detail eksperimen Nalesha tersedia di studi kasus Nalesha CSS Anchor Positioning.

Cara Memilih Antara Anchor Positioning dan Floating UI

Gunakan CSS Anchor Positioning jika tooltip atau popover berperilaku statis (top, bottom, left, right) atau bisa diatur dengan position-try-options. Pertahankan Floating UI hanya jika butuh collision detection adaptif kompleks atau virtual element (tooltip mengikuti kursor pixel-by-pixel).

Pertanyaan Umum

Apakah anchor-name bisa dinamis berdasarkan data attribute?

Bisa via custom property. Pasang style={{ "--sku-anchor": "--sku-" + id }} di komponen React, lalu pakai anchor-name: var(--sku-anchor) di CSS. Hindari menanam nilai inline di string CSS karena tidak reaktif.

Apakah polyfill aman untuk SEO?

Aman. Polyfill berjalan client-side dan tidak mengubah markup yang di-crawl. Bot pencari membaca konten kanonikal apa adanya, sesuai dokumentasi [Google Search Central tentang JavaScript SEO](https://developers.google.com/search/docs/crawling-indexing/javascript/javascript-seo-basics).

Bagaimana dengan animasi reposisi saat scroll?

Gunakan transition pada top dan left, plus position-visibility: anchors-visible untuk menyembunyikan tooltip ketika jangkar keluar viewport.

Insight Aplikatif

Untuk marketer Indonesia yang mengelola landing page atau katalog, migrasi tooltip dan popover ke CSS Anchor Positioning adalah salah satu intervensi performa paling murah dengan dampak yang dapat diukur. Jika konsisten dilakukan di seluruh halaman, total pemangkasan JavaScript bisa mencapai 30 sampai 50 KB per situs, yang langsung memperbaiki Interaction to Next Paint dan secara tidak langsung memperbaiki sinyal kualitas yang dipakai AI Search.