Popover API adalah fitur HTML5 modern terkini yang memungkinkan developer membuat popup, menu mengambang, atau tooltip hanya dengan atribut HTML murni tanpa pustaka modal JavaScript tambahan!
Cukup gunakan atribut popover pada elemen target dan pasang atribut popovertarget="idTarget" pada tombol pemicunya.
<!DOCTYPE html>
<html>
<body>
<h3>HTML Popover API Bawaan</h3>
<button popovertarget="myPopover" style="background:#04AA6D; color:white; border:none; padding:10px 18px; border-radius:6px; cursor:pointer;">
Buka Popover Pesan ยป
</button>
<div id="myPopover" popover style="padding:20px; border-radius:12px; border:2px solid #0d2e5c; background:white; box-shadow:0 10px 25px rgba(0,0,0,0.2);">
<h4 style="margin-top:0; color:#0d2e5c;">Pesan Notifikasi Skillance</h4>
<p>Popover ini muncul secara native di lapisan teratas (top layer) browser tanpa script tambahan!</p>
</div>
</body>
</html>Klik di luar popover atau tekan tombol Esc pada keyboard untuk otomatis menutup popover secara default.
Atribut apa yang dipasang pada tombol untuk menghubungkannya ke ID popover yang ingin dibuka?