CSS Anchor Positioning: Membuat Tooltip dan Popover Lebih Adaptif

Menu, tooltip, dan popover sering harus mengikuti posisi tombol pemicunya. Selama bertahun-tahun, pengembang biasanya mengatur koordinat elemen tersebut dengan JavaScript atau memakai pustaka seperti Floating UI. CSS Anchor Positioning menawarkan pendekatan lain: sebuah elemen dapat diposisikan relatif terhadap elemen lain melalui aturan CSS, termasuk pilihan posisi alternatif ketika ruang layar terbatas.

Fitur ini berguna untuk antarmuka yang memiliki menu kontekstual, label bantuan, panel informasi, dan kontrol mengambang. Meski begitu, bukan berarti JavaScript tidak lagi dibutuhkan untuk semua jenis interaksi. Pemilihan teknologi tetap bergantung pada kebutuhan aplikasi dan browser yang digunakan pengunjung.

Apa Itu CSS Anchor Positioning?

CSS Anchor Positioning memungkinkan satu elemen menjadi anchor atau acuan, sementara elemen lain ditempatkan berdasarkan posisi maupun ukuran anchor tersebut. Hubungan ini tidak harus mengikuti struktur induk-anak secara langsung seperti pola layout tradisional. Dengan begitu, panel popover dapat tetap merujuk pada tombol pemicunya meskipun markup halaman lebih kompleks.

Fitur ini menyediakan properti seperti anchor-name, position-anchor, position-area, dan fungsi anchor(). Untuk penempatan yang lebih fleksibel, pengembang juga dapat menentukan strategi posisi alternatif agar panel tidak keluar dari area tampilan.

Membuat Tooltip yang Mengikuti Tombol

Contoh berikut memperlihatkan konsep dasar. Tombol diberi nama anchor, lalu tooltip merujuk nama tersebut. Kode ini adalah fondasi penempatan; perilaku membuka dan menutup tooltip tetap perlu ditangani melalui HTML, JavaScript, atau pola interaksi yang sesuai dengan kebutuhan aksesibilitas.

.help-button {
  anchor-name: --help-trigger;
}

.help-tooltip {
  position: absolute;
  position-anchor: --help-trigger;
  position-area: top;
  margin-bottom: 0.5rem;
  max-width: 18rem;
}

Properti position-area menyatakan area relatif terhadap anchor tempat elemen ditempatkan. Untuk penyesuaian yang lebih rinci, fungsi anchor() dapat digunakan dalam nilai inset, misalnya mengacu pada tepi bawah atau kiri anchor. Pilihan sintaks yang tepat bergantung pada bentuk layout dan perilaku yang ingin dicapai.

Menghindari Popover Keluar dari Layar

Masalah umum pada menu mengambang adalah ruang yang tidak cukup. Menu yang selalu muncul di bawah tombol bisa terpotong ketika tombol berada dekat bagian bawah viewport. CSS Anchor Positioning menyediakan mekanisme fallback melalui aturan @position-try dan properti terkait, sehingga browser dapat mencoba posisi alternatif ketika posisi utama tidak cocok.

.menu-trigger {
  anchor-name: --menu-trigger;
}

.context-menu {
  position: fixed;
  position-anchor: --menu-trigger;
  position-area: bottom span-right;
  position-try-fallbacks: flip-block, flip-inline;
}

Contoh tersebut menunjukkan arah implementasi, bukan konfigurasi universal untuk setiap menu. Periksa dukungan nilai yang digunakan pada browser sasaran, lalu uji menu pada viewport sempit, zoom tinggi, halaman yang dapat digulir, dan posisi anchor dekat tepi layar. Untuk kontrol yang lebih eksplisit, gunakan strategi fallback yang tersedia pada versi browser yang didukung proyek.

Kapan Layak Menggunakannya?

• Tooltip dan label bantuan: menjaga label tetap dekat dengan kontrol yang menjelaskan fungsinya.
• Menu kontekstual: menempatkan menu di dekat tombol atau item yang dipilih.
• Popover informasi: menampilkan panel kecil tanpa menghitung koordinat setiap kali halaman berubah.
• Antarmuka responsif: menyediakan pilihan penempatan saat ruang di satu sisi tidak mencukupi.

Untuk layout halaman secara keseluruhan, Grid dan Flexbox tetap menjadi pilihan utama. Anchor Positioning lebih cocok ketika sebuah elemen perlu mengikuti elemen acuan tertentu, bukan untuk menggantikan seluruh sistem layout CSS.

Hal yang Perlu Diperhatikan

Dukungan browser untuk CSS Anchor Positioning telah berkembang pesat dan dokumentasi MDN menandainya sebagai Baseline Newly Available pada 2026. Namun, label itu tidak menjamin setiap perangkat lama atau setiap bagian fitur memiliki dukungan yang sama. Periksa kompatibilitas properti dan fallback yang benar-benar dipakai, bukan hanya nama fitur secara umum.

Jangan abaikan aksesibilitas. Tooltip harus dapat dipahami tanpa bergantung pada hover saja, kontrol harus bisa digunakan dengan keyboard, dan konten penting tidak boleh hanya tersedia melalui efek visual. Pastikan pula elemen mengambang tidak menutupi tombol lain atau keluar dari area yang terlihat pada layar kecil.

Jika aplikasi sudah memakai pustaka penempatan popover, bandingkan perilaku nyata sebelum menggantinya. Pustaka JavaScript dapat menyediakan perhitungan, event, dan kompatibilitas lintas browser yang lebih luas. CSS bisa mengurangi kode untuk kasus sederhana, sedangkan solusi hibrida masih masuk akal bagi aplikasi dengan kebutuhan kompleks.

Baca juga: Web Components: Membuat Elemen HTML yang Dapat Digunakan Ulang.

Referensi resmi: Dokumentasi MDN tentang CSS Anchor Positioning.

Langkah Implementasi yang Disarankan

1. Tentukan elemen acuan dan elemen yang harus mengikutinya.
2. Buat contoh kecil menggunakan anchor-name dan position-anchor.
3. Tambahkan posisi utama serta fallback yang diperlukan.
4. Uji dengan keyboard, sentuhan, zoom, scrolling, dan viewport kecil.
5. Gunakan deteksi fitur atau fallback layout agar konten tetap dapat diakses di browser yang belum mendukung.

Kesimpulan

CSS Anchor Positioning dapat menyederhanakan penempatan elemen yang mengikuti tombol atau komponen lain, tetapi tetap perlu diuji pada browser sasaran. Lengkapi penempatan dengan perilaku interaksi yang aksesibel, dukungan keyboard dan sentuhan, serta fallback yang menjaga konten tetap dapat digunakan saat fitur tidak tersedia.