Tooltip adalah panel kecil yang harus mengikuti satu elemen tertentu dan tetap terlihat. Menggulirkannya secara manual berarti menggulirkan pendengar, menjepit area pandang matematika, dan perang indeks-z. Penempatan jangkar menjadikan hubungan bersifat deklaratif: beri nama jangkar, ikat pengikut, pilih wilayah. Popover menangani penumpukan di klik luar dan penumpukan lapisan atas secara gratis.

<button class="pin" popovertarget="tip">?</button>
<div id="tip" class="tip" popover>Available after 5 PM</div>
.pin { anchor-name: --help-pin; }
.tip {
  position: fixed;
  position-anchor: --help-pin;
  position-area: top;
  margin-bottom: 0.4rem;
}

Bagaimana potongan-potongan itu tersusun

  • nama jangkar menandai elemen jangkar; position-anchor mengikat pengikut padanya.
  • pilihan area posisi tempat tinggal pengikut relatif terhadap jangkar: atas, bawah, dan kombinasi dengan tengah atau rentang.
  • Browser membalik ke sisi berlawanan secara otomatis ketika wilayah yang dipilih akan mendorong pengikut keluar dari layar.
  • Atribut popover menyediakan perilaku buka-tutup, pemberhentian ringan, dan penempatan lapisan atas, sehingga tidak ada indeks-z yang diketik di mana pun.

Gerbang itu, jangan menebaknya

@supports (anchor-name: --test) {
  /* anchored layout lives here */
}

Anchor positioning kini tersedia di mesin-mesin modern sepanjang 2026, dengan Safari 27 membawa transform-aware anchors dan visibility keywords yang disempurnakan lagi di 27.0 dan 27.2. Tutup fitur ini dengan gerbang @supports: di luar gerbang, halaman cukup tanpa tooltip, yang jauh lebih terhormat daripada tooltip yang nyasar. Uji keyboard dan screen reader sekali, karena atribut popover mengerjakan lebih banyak hal daripada kelihatannya, dan mengerjakannya dengan benar.

Bagian yang paling gacor adalah penghapusan: tidak ada pendengar gulir, tidak ada matematika penjepit, tidak ada modal arc JavaScript. Satu hubungan, dinyatakan dalam CSS, diperiksa oleh browser.