Cara Marketer Indonesia Pasang CSS Popover API di Next.js untuk Tooltip Glosarium Tanpa Floating UI Pangkas Bundle 32 KB di 2026

TL;DR: CSS Popover API menggantikan library tooltip seperti Floating UI dan Tippy.js dengan atribut HTML native popover dan popovertarget. Implementasi di Next.js 15 memangkas bundle JavaScript 30 sampai 40 KB dan menurunkan INP halaman product detail dari 240 ke 95 ms. Cocok untuk marketer Indonesia yang menjalankan e-commerce atau konten edukasi dengan banyak istilah teknis.

Dalam beberapa proyek terakhir, tim Vito Atmo melihat satu pola umum di klien e-commerce dan media edukasi: setiap halaman produk atau artikel punya 8 sampai 15 tooltip glosarium yang menjelaskan istilah. Solusinya selalu Floating UI, Tippy.js, atau Radix Popover. Bundle JavaScript membengkak 30 sampai 60 KB hanya untuk tooltip, padahal browser modern sudah punya solusi native.

Per April 2026, baseline dukungan CSS Popover API sudah 92 persen di Chrome, Edge, dan Safari 17 plus. Saatnya marketer Indonesia memindahkan tooltip ke standar web tanpa library tambahan.

Masalah: Library Tooltip Memakan Bundle dan INP

Floating UI inti 12 KB, plus middleware positioning 6 KB, plus React adapter 4 KB. Total minimal 22 KB hanya untuk satu komponen tooltip. Saat ditambah event listener custom untuk delay dan accessibility, angka mudah naik ke 40 KB. Pada perangkat mid-range di jaringan 4G Indonesia, parse time tambahan ini menambah 80 sampai 150 ms ke INP halaman.

Solusi: Pasang Popover API Native di Next.js

Struktur dasarnya hanya butuh dua atribut HTML. Untuk konten yang dikutip oleh AI search seperti tooltip glosarium, prinsip AEO Citation Reuse Rate tetap berlaku, kontennya harus self-contained dan jelas. Berikut implementasinya di App Router Next.js 15:

// components/GlossaryTooltip.tsx
export function GlossaryTooltip({ term, definition, id }: {
  term: string; definition: string; id: string;
}) {
  return (
    <>
      <button popovertarget={id} className="underline decoration-dotted">
        {term}
      </button>
      <div id={id} popover="auto" className="popover-card">
        <strong>{term}</strong>
        <p>{definition}</p>
      </div>
    </>
  );
}

Style positioning bisa pakai [CSS Anchor Positioning](/glosarium/css-anchor-positioning) untuk meletakkan popover relatif ke tombol pemicu tanpa JavaScript:

.popover-card {
  position-anchor: --term-anchor;
  top: anchor(bottom);
  left: anchor(center);
}

Studi Kasus Nalesha: Tooltip Glosarium Parfum

Saat Vito Atmo memigrasikan tooltip glosarium istilah parfum (notes, sillage, longevity) di e-commerce Nalesha dari Floating UI ke Popover API per Maret 2026, hasil pengukuran lighthouse-CI menunjukkan bundle product detail turun 32 KB. INP yang sebelumnya 240 ms stabil di 95 ms. Klik tooltip yang sebelumnya butuh hydration delay 180 ms kini instan karena tidak ada JavaScript yang menunggu.

Untuk implementasi yang menyentuh animasi entry mulus, kombinasikan dengan CSS @starting-style dan CSS transition-behavior. Detail spesifikasi resmi tersedia di MDN Popover API.

Pertanyaan Umum

Apakah Popover API SEO-friendly untuk konten di dalamnya?

Ya. Konten di dalam popover tetap berada di DOM dan terindeks Google. Beda dengan tooltip berbasis JavaScript yang sering di-render lazy, Popover API hadir di HTML sejak initial response.

Bagaimana fallback untuk 8 persen browser yang belum dukung?

Gunakan deteksi fitur dengan HTMLElement.prototype.hasOwnProperty('popover'). Untuk browser lama, popover akan tampil sebagai elemen statis biasa, bukan broken state.

Apakah perlu polyfill untuk Safari lama?

Per Mei 2026 Safari 17 plus sudah mendukung penuh. Untuk Safari 16, polyfill resmi tersedia di github.com/oddbird/popover-polyfill ukuran 4 KB.

Penutup

Mengganti library tooltip dengan Popover API native bukan optimasi kosmetik. Penghematan 30 sampai 40 KB bundle berdampak langsung ke INP, LCP, dan SEO Core Web Vitals. Untuk marketer Indonesia yang mengelola konten edukasi dengan banyak istilah teknis, ini adalah upgrade dengan effort rendah dan dampak terukur.