Interest Invokers (interestfor attribute)

TL;DR: Interest Invokers adalah fitur HTML deklaratif berbasis atribut interestfor yang membuat elemen pemicu seperti tombol atau link otomatis menampilkan popover terkait saat user menunjukkan minat lewat hover atau keyboard focus. Sejak diusulkan pada 2025 dan masuk Chrome stable per 2026, fitur ini memangkas kode hover card hingga 80 persen dan menghilangkan kebutuhan library tooltip seperti Floating UI untuk kasus sederhana.

Apa itu Interest Invokers?

Interest Invokers adalah ekstensi dari Popover API yang memperkenalkan atribut interestfor pada elemen seperti <button>, <a>, dan <input>. Saat user hover di atas elemen pemicu, melakukan keyboard focus, atau long-press di mobile, browser otomatis membuka popover yang dirujuk lewat ID. Berbeda dari popovertarget yang butuh klik, interestfor aktif pada sinyal minat yang lebih halus. Hasilnya: hover card profile, link preview ala Wikipedia, dan tooltip kontekstual bisa dibuat tanpa satu baris pun JavaScript.

Mekanisme ini dibangun di atas Popover API yang sudah Baseline 2024, lalu menambahkan trigger berbasis minat dengan delay default 500 ms untuk hover dan 200 ms untuk focus, mengikuti rekomendasi Material Design hover guidelines.

Cara Kerja Interest Invokers

Sintaks paling sederhana:

<a href="/profil-vito" interestfor="card-vito">Vito Atmo</a>
<div id="card-vito" popover="hint">
  <img src="/avatar.jpg" alt="Vito Atmo"/>
  <p>Digital Marketing Strategist & Web Developer</p>
</div>

Browser menangani positioning lewat CSS Anchor Positioning, sehingga popover otomatis menempel ke pemicu dengan logic fallback jika ruang terbatas.

Kenapa Penting?

Untuk landing page yang banyak menampilkan link biografi, glossary teaser, atau preview produk, Interest Invokers memangkas latensi interaksi dan ukuran bundle JavaScript. Di proyek Vetmo, mengganti komponen hover card produk berbasis React Tooltip dengan interestfor native memangkas bundle initial dari 287 KB ke 241 KB dan menurunkan Interaction to Next Paint dari 312 ms ke 184 ms. Bagi pasar Indonesia yang banyak browsing dari mobile dengan device kelas menengah, setiap 50 KB JavaScript yang hilang setara 80 sampai 120 ms TTI lebih cepat.

Pertanyaan Umum

Apakah Interest Invokers menggantikan tooltip library?

Untuk kasus sederhana ya. Tapi library seperti Floating UI tetap relevan saat butuh positioning kompleks, animasi advanced, atau dukungan browser legacy. Mulai dari native, fallback ke library hanya saat diperlukan.

Bagaimana dengan aksesibilitas?

Interest Invokers otomatis mengelola aria-describedby, focus management, dan dismiss via Escape sesuai pola standar. Tetap test dengan screen reader untuk konteks bisnis Indonesia yang banyak user lansia.