Tooltip, menu konteks, dan popover kecil berbagi satu kebutuhan teknis: elemen tersebut harus menempel pada elemen pemicunya, di mana pun pemicu itu berada di halaman. Tanpa dukungan khusus, posisinya dihitung dengan JavaScript — membaca koordinat pemicu, mengompensasi ukuran tooltip dan viewport, lalu memasang ulang posisi setiap kali layout berubah. Anchor positioning memindahkan seluruh pekerjaan itu ke CSS: kita menandai satu elemen sebagai anchor, lalu meminta elemen lain memposisikan dirinya relatif terhadap anchor tersebut. Fitur ini telah dirilis di seluruh browser utama sejak akhir 2025; karena banyak pengguna masih memakai browser lama, pola pemasangannya selalu dibungkus @supports dengan fallback klasik.

Menautkan Elemen ke Anchor #

Pasangan properti minimum untuk mengikat tooltip pada pemicunya adalah anchor-name pada pemicu dan position-anchor pada tooltip, lalu position-area memilih wilayah penempatannya:

css 
.pemantik {
  anchor-name: --pemantik-tombol;
}

@supports (anchor-name: --uji) {
  .tooltip {
    position: fixed;
    position-anchor: --pemantik-tombol;
    position-area: top;
    margin-bottom: 8px;
  }
}

Mari kita telaah tiap barisnya:

  1. anchor-name: --pemantik-tombol: pemicu diberi nama anchor. Namanya ditulis seperti custom property — diawali dua tanda hubung — dan dapat dipakai berulang oleh lebih dari satu elemen.
  2. position: fixed: tooltip dikeluarkan dari alur dokumen; posisinya sepenuhnya ditentukan oleh relasi ke anchor.
  3. position-anchor: --pemantik-tombol: tooltip mengikat dirinya ke elemen yang membawa nama anchor tersebut. Dari titik ini browser mengetahui pasangan pemicu-ikutannya.
  4. position-area: top: tooltip ditempatkan pada wilayah di atas anchor, terpusat horizontal — position-area menerima kata kunci lain seperti bottom, right, dan kombinasi petak seperti top span-left.
  5. margin-bottom: 8px: jarak antara tooltip dan puncak pemicunya, sebab wilayah top menempel langsung pada tepi anchor.

Keunggulan mekanisme ini terasa saat layout bergerak: bila pemicu bergeser akibat perubahan konten atau ukuran jendela, browser memindahkan tooltip mengikuti anchor tanpa satu baris skrip pun.

position-area bekerja di atas kisi tiga kali tiga yang dipasang mengelilingi anchor: top memilih petak tengah di atas, bottom right memilih petak kanan-bawah, dan kata kunci span seperti top span-right melebar di beberapa petak sekaligus. Bila satu wilayah tidak cukup, properti lanjutan seperti position-try-fallbacks menawarkan daftar wilayah cadangan yang dicoba browser satu per satu — pola itu di luar cakupan chapter ini, dan dokumen position-area di MDN menjadi rujukan lanjutannya. Selain itu, fungsi anchor() dapat membaca sisi anchor sebagai nilai panjang untuk kasus yang menuntut kontrol penuh.

Fallback untuk Browser Lama #

Blok @supports di atas menyembunyikan seluruh aturan anchor dari browser yang tidak mengenalnya. Di browser tersebut, tooltip ditata dengan pola klasik: wadah position: relative dan tooltip position: absolute. Demo chapter ini menampilkan kedua versi berdampingan:

css 
.wadah-fallback {
  position: relative;
}

.tooltip-fallback {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
}

Versi fallback menempel pada wadahnya, bukan pada pemicu secara bebas — itulah batas pola klasik yang diselesaikan anchor positioning. Urutan penulisannya patut diperhatikan: gaya fallback ditulis tanpa syarat, dan peningkatan anchor ditulis di dalam @supports sehingga menimpa fallback hanya bila didukung. Pola ini identik dengan yang kita pakai pada Chapter Progressive Enhancement .

Demo: Dua Tooltip, Dua Teknik #

html index.html 
<div class="wadah-fallback">
  <p class="tooltip-fallback" data-expected='{"position":"absolute"}'>Tooltip fallback (absolute)</p>
  <button class="pemantik-klasik">Pemicu fallback</button>
</div>
<div class="bagian-anchor">
  <button class="pemantik" data-expected='{"anchor-name":"--pemantik-tombol"}'>Pemicu anchor</button>
  <p class="tooltip" data-expected='{"position":"fixed","position-anchor":"--pemantik-tombol","position-area":"top"}'>
    Tooltip dengan anchor positioning
  </p>
</div>

Hasil di Browser:

text 
Tooltip fallback tampil di atas tombol pemicu klasiknya — computed
position: absolute, ditempel pada wadah relative-nya.
Pemicu anchor tercatat membawa anchor-name: --pemantik-tombol.
Tooltip kedua tampil tepat di atas pemicunya dengan position: fixed,
position-anchor: --pemantik-tombol, dan position-area: top
— posisi ditentukan browser dari relasi anchor.

Nilai computed pada demo diperiksa otomatis oleh harness melalui atribut data-expected (lingkungan uji memakai browser yang mendukung anchor positioning). Uji visualnya secara manual: melayang di atas kedua tombol menampilkan tooltip masing-masing, dan tooltip anchor tetap menempel bila pemicunya bergeser.