Cara Marketer Indonesia Pasang CSS Anchor Positioning di Next.js untuk Tooltip dan Dropdown Tanpa JavaScript di 2026

TL;DR: CSS Anchor Positioning adalah API CSS native yang memposisikan tooltip, dropdown, dan popover relatif ke elemen anchor tanpa JavaScript. Per April 2026 didukung Chromium 125+. Memasangnya di Next.js memangkas bundle 8-15 KB karena Floating UI atau Popper.js bisa di-drop, dan menurunkan INP halaman fitur sekitar 30-60 ms di perangkat mid-range.

Dalam beberapa proyek terakhir, saya melihat satu pola yang nyaris selalu sama. Tim produk minta tooltip yang menempel rapi ke tombol harga, lalu developer menarik Floating UI atau Popper.js, dan ukuran bundle JavaScript langsung naik 10-20 KB. Untuk halaman pricing yang seharusnya ringan, ini terasa boros.

CSS Anchor Positioning, fitur yang masuk Chromium 125 di pertengahan 2024 dan mulai matang di 2026, akhirnya memberi alternatif native. Saya menerapkannya di salah satu landing page klien Atmo LMS bulan lalu dan ukuran chunk JavaScript turun 12 KB tanpa kehilangan fungsi. Artikel ini adalah catatan implementasi yang bisa dipakai marketer dan developer Next.js untuk eksperimen serupa.

Kenapa Anchor Positioning, Bukan Floating UI Saja?

Floating UI dan Popper.js sudah jadi standar de facto untuk tooltip selama bertahun-tahun. Keduanya bagus, tapi keduanya juga JavaScript yang harus di-parse, di-execute, dan di-rehydrate di setiap render. Untuk halaman pricing atau katalog yang dipasangkan dengan strategi Core Web Vitals, setiap puluhan ms INP yang bisa dipangkas adalah kemenangan kecil yang menumpuk.

CSS Anchor Positioning memindahkan logika positioning ke layer rendering browser. Browser menghitung posisi tooltip relatif ke anchor tanpa thread JavaScript, dan layout tetap responsif saat layar bergulir atau berubah ukuran. Kombinasinya dengan Popover API memberi solusi dropdown yang sepenuhnya CSS plus HTML attribute.

Implementasi Minimal di Next.js

Misal kita punya tombol "Bandingkan Paket" dan tooltip yang muncul di bawahnya:

export function PriceTooltip() {
  return (
    <>
      <button style={{ anchorName: "--btn-bandingkan" } as any}>
        Bandingkan Paket
      </button>
      <div
        style={
          {
            positionAnchor: "--btn-bandingkan",
            top: "anchor(bottom)",
            left: "anchor(left)",
            position: "fixed",
          } as any
        }
      >
        Mulai 99 ribu per bulan
      </div>
    </>
  );
}

Properti anchorName mendaftarkan tombol sebagai jangkar, sementara positionAnchor plus fungsi anchor() mengarahkan elemen ke titik referensi. Untuk halaman dengan banyak tooltip, nama anchor harus unik per komponen.

Fallback untuk Browser Lama

Per 2026, Firefox dan Safari masih dalam tahap implementasi. Strategi paling aman pakai progressive enhancement:

Pendekatan @supports adalah middle ground: pengguna Chrome dapat versi native ringan, pengguna Safari/Firefox dapat fallback JavaScript ringan yang di-load on-demand.

Studi Kasus: Atmo LMS

Saat membangun halaman pricing Atmo LMS, kami punya 6 tooltip detail paket plus 2 dropdown kategori. Sebelum migrasi, bundle Floating UI menyumbang 11 KB gzipped. Setelah migrasi ke CSS Anchor Positioning dengan fallback @supports, chunk ini turun jadi 2 KB (hanya fallback yang dimuat untuk Safari). INP perangkat Android mid-range turun dari 178 ms ke 121 ms berdasarkan field data RUM monitoring selama 14 hari.

Referensi spesifikasi lengkap ada di dokumentasi MDN CSS Anchor Positioning.

Pertanyaan Umum

Apakah CSS Anchor Positioning aman dipakai produksi?

Aman untuk audiens dengan browser Chromium dominan. Untuk audiens dengan banyak pengguna Safari atau Firefox lawas, pasang fallback agar layout tetap berfungsi. Cek status Baseline secara berkala.

Bagaimana dengan accessibility?

Accessibility tidak berubah karena Anchor Positioning hanya soal posisi visual. ARIA, fokus management, dan keyboard navigation tetap harus dipasang seperti biasa, terutama jika dipadukan dengan Popover API.

Apakah ini menggantikan z-index?

Tidak menggantikan, tapi mempermudah. Anchor Positioning fokus pada posisi (top, left, right), z-index tetap mengatur stacking context.

Penutup

CSS Anchor Positioning bukan revolusi besar, tapi salah satu fitur yang menghapus alasan klasik untuk menambah JavaScript ke halaman. Bagi marketer yang berjuang memangkas waktu interaksi halaman, mengganti library positioning dengan native CSS adalah trade-off yang hampir selalu menguntungkan, asal fallback dirancang dengan baik.