Halaman ini diterjemahkan oleh Cloud Translation API.

Popover = petunjuk

Keith Cirkel

Mason Freed

Dipublikasikan: 26 Februari 2025

Chrome 133 dibuat berdasarkan fitur pop-up yang ada dengan memperkenalkan mode baru: popover="hint". Mode yang dikelola browser ini memungkinkan konteks penumpukan baru yang menyederhanakan pembuatan tooltip dan elemen mengambang sementara serupa. Hal ini mengurangi upaya developer sekaligus mempertahankan fleksibilitas desain.

Pengantar dan histori

Popover API, diperkenalkan di Chrome 114, memungkinkan Anda membuat UI mengambang yang mudah diakses seperti menu dan tooltip. Secara default, popover="auto" menangani fungsi penutupan ringan dan pengelolaan fokus untuk Anda, tanpa memerlukan pembuatan skrip tambahan, seperti yang dibahas dalam Memperkenalkan Popover API. Saat membuka popover popover="auto", semua popover non-ancestor lainnya dengan popover="auto" akan ditutup, yang membuat API ergonomis yang melakukan hal yang paling masuk akal.

Popover yang menutup popover lainnya

<div id="p1" popover>First Popover</div>
<button popovertarget="p1">Open popover 1</button>
<div id="p2" popover>Second Popover</div>
<button popovertarget="p2">Open popover 2</button>

Dalam contoh ini, membuka popover 2 akan menutup popover 1, karena popover="auto" hanya mengizinkan satu popover tersebut terbuka dalam satu waktu.

Meskipun perilaku ini berfungsi dengan baik untuk menu dan dialog, perilaku ini dapat menimbulkan masalah saat beberapa jenis UI mengambang perlu berdampingan. Misalnya, menu dan tooltip yang menggunakan popover="auto" dapat bentrok, saat membuka tooltip akan menutup menu. Hal ini mungkin tampak sebagai situasi yang tidak umum, tetapi sering muncul di UI bergaya aplikasi modern. Misalnya, menu di header github.com menggunakan popover untuk menu dan tooltip, sehingga keduanya dapat terlihat secara bersamaan dalam kondisi tertentu:

Salah satu cara untuk mengatasinya adalah dengan menggunakan popover="manual" untuk elemen tooltip, yang memungkinkan kontrol penuh popover dengan pembuatan skrip. Namun, hal ini memerlukan penerapan ulang perilaku penumpukan, penutupan ringan, dan pengelolaan fokus—tepatnya tugas yang dirancang untuk ditangani Popover API. Hal ini membuat kami mempelajari cara memperluas API untuk menyediakan fungsi yang hilang ini.

Melalui riset developer, kami mengidentifikasi dua konteks penumpukan umum:

UI Persisten: Misalnya, menu dan dialog.
UI sementara: Misalnya, kartu informasi dan tooltip.

Untuk mengakomodasi keduanya, popover="hint" memperkenalkan stack kedua, yang berbeda dengan popover="auto", yang memastikan menu tetap terbuka meskipun tooltip muncul. Daripada memperkenalkan beberapa konteks penumpukan untuk berbagai jenis UI—yang pada dasarnya akan menemukan kembali z-index—pendekatan ini membuat semuanya lebih sederhana dengan menentukan hanya dua kategori luas: UI persisten (auto) dan UI sementara (hint). Hal ini menyeimbangkan fleksibilitas dan menghindari munculnya kembali masalah yang sama yang Anda hadapi sebelum menggunakan popover.

Perilaku nilai baru

popover="auto" dan popover="hint" mendukung penutupan ringan, yang berarti keduanya otomatis ditutup saat pengguna mengklik di luarnya, atau menekan Esc di keyboard. Dalam hal ini, kedua gaya tersebut identik.

Dalam hal menyembunyikan paksa popover lain, popover="auto" menutup semua popover auto dan hint lainnya saat dibuka, memastikan bahwa hanya satu popover tersebut yang aktif dalam satu waktu (satu pengecualian di sini adalah popover bertingkat, yang dijelaskan di bawah). Di sisi lain, popover="hint" hanya menyembunyikan paksa popover hint lainnya, sehingga menu dan tooltip tetap terbuka dan dapat digunakan bersama.

Perbedaan utamanya terletak pada perilaku penyusunan bertingkat. popover="auto" mendukung hierarki, sehingga popover turunan tetap terbuka dalam popover induk lain. popover="hint" memiliki perilaku penyusunan bertingkat khusus, yang merupakan tempat "stack" terpisah. Saat popover hint berada di dalam popover auto, popover tersebut akan bergabung dengan stack auto untuk mempertahankan pengelompokan kontekstual, yang berarti bahwa popover tersebut akan tetap terbuka hingga popover auto atau hint lainnya menyebabkannya disembunyikan secara paksa. Hal ini memberikan perilaku intuitif, dengan tooltip tidak mengganggu menu atau popover lainnya.

Terakhir, untuk kasus penggunaan yang sangat berbeda, selalu ada popover="manual", yang tidak dilengkapi dengan perilaku apa pun yang sudah terintegrasi, sehingga Anda dapat menentukan fungsi dan perilaku yang tepat yang Anda butuhkan.

	`popover="auto"`	`popover="hint"`	`popover="manual"`
Menutup dengan ringan	Ya	Ya	Tidak
Menyembunyikan secara paksa:	`auto` dan `hint` yang tidak terkait	`hint` yang tidak terkait	Nothing
Bertingkat:	Ya	Khusus (dijelaskan sebelumnya)	T/A—tidak ada lampu yang dimatikan

Pemicu pengarahan kursor

Pola UX yang umum adalah tooltip dan kartu pengarahan dipicu oleh pengarahan kursor. Mengarahkan kursor ke elemen yang diinginkan, selama jangka waktu tertentu, akan menyebabkan kartu informasi ditampilkan. Saat ini, perilaku tersebut perlu diterapkan melalui JavaScript, misalnya dengan menambahkan pemroses untuk peristiwa mouseenter dan mouseleave. Namun, API lain sedang dalam pengembangan yang akan membuat pengaktifan pengarahan kursor bersifat deklaratif: Interest Invokers API.

API ini masih dalam proses, tetapi ide umumnya adalah menambahkan atribut yang disebut interesttarget ke banyak jenis elemen, yang memberikan perilaku pemicu pengarahan kursor ke elemen tersebut:

<a interesttarget="my-hovercard" href="...">
  Hover to show the hovercard
</a>
<span popover="hint" id="my-hovercard">
  This is the hovercard
</span>

Dengan HTML sebelumnya, mengarahkan kursor ke link <a> akan otomatis menampilkan popover my-hovercard. Memindahkan pointer dari elemen tersebut akan menyembunyikan popover. Semuanya dilakukan tanpa JavaScript.

Contoh

<button>An interesting button</button>
<div popover="hint">More info about the button</div>

[popover] {
  margin: 0;
  inset: auto;
  position-area: bottom right;
}

const button = document.querySelector('button');
const popover = document.querySelector('[popover]');

button.onmouseenter = () => {
  setTimeout(() => {
    popover.showPopover({source: button});
  }, 500);
}

button.onmouseleave = () => {
  setTimeout(() => {
    popover.hidePopover();
  }, 500);
}

Tombol dengan tooltip. — Coba fitur ini secara live.

Contoh ini menggunakan popover="hint" untuk membuat tooltip dasar, yang memberikan informasi selengkapnya tentang tombol saat tombol diarahkan dengan mouse. Aktivasi aktivitas mengarahkan kursor disediakan oleh pengendali peristiwa untuk mouseenter dan mouseleave dengan penundaan sederhana 0,5 detik. Perhatikan bahwa ada beberapa detail yang tidak ditangani oleh contoh ini:

Mengarahkan kursor ke popover itu sendiri tidak mencegah kursor yang menjauh dari elemen pemicu menutup popover. Jadi, Anda tidak dapat menyalin atau menempelkan teks dari popover, misalnya.
Tidak ada "debouncing": mengarahkan kursor ke tombol selama sebagian kecil detik sudah cukup untuk memicu popover, meskipun tombol dengan cepat diarahkan ke luar sebelum waktu penundaan berlalu. Dalam hal ini, tooltip "berkedip" terbuka dan tertutup dengan cepat.
Contoh ini sama sekali tidak dapat diakses: pengguna yang tidak menggunakan mouse tidak dapat mengakses konten tooltip.

Kekurangan ini dapat diperbaiki dengan JavaScript tambahan. Misalnya, focus (atau mungkin pengendali peristiwa keydown dan keyup) harus ditambahkan untuk mendukung aktivasi popover berbasis keyboard. Untuk penjelasan tentang hal-hal yang perlu ditangani dengan benar untuk memastikan tooltip dapat diakses, lihat postingan blog yang bagus ini dari Sarah Higley. Semua masalah ini (dan lainnya) akan otomatis ditangani secara deklaratif oleh Interest Invokers API.

Cari tahu selengkapnya

Lihat penjelasan fitur atau spesifikasi HTML untuk mengetahui detail selengkapnya.