Wat is HTML Popover Generator?
De HTML Popover API stelt u in staat pop-up overlays, dropdowns, tooltips en kleine panels te maken met alleen HTML-attributen zoals popover en popovertarget. De browser beheert het openen, sluiten, light-dismiss en stapelen zonder aangepaste JavaScript. Dit is handig voor help-popovers, notificatie-dropdowns en eenvoudige menu's op statische sites waar u het gebruik van een JavaScript-bibliotheek wilt vermijden.
Snel antwoord
Maak een native HTML-popover met de Popover API met behulp van popovertarget-attributen. De gegenereerde opmaak werkt zonder JavaScript in ondersteunende browsers door het native popover-gedrag van de browser.
Last updated: 2026-06-11
Beperkingen
- Safari en Firefox hebben de Popover API toegevoegd in recente versies. iOS Safari kan randgevallen hebben met light-dismiss bij aanraakinteracties.
- Complexe interactieve inhoud zoals formulieren met meerdere velden in een popover kan focus-trapping- en toetsenbordnavigatieproblemen hebben.
- De popover sluit bij buitenklikken standaard in de auto-modus. Gebruik de manual-modus of pas het ontwerp aan als gebruikers moeten kunnen interageren met inhoud buiten de popover.
Sources:MDN Web Docs · W3C Specifications · jquery.app on GitHub
Zo gebruik je deze tool
- Stel een unieke popover-ID en de tekst in die op de triggerknop zal verschijnen.
- Schrijf de HTML-inhoud die in de popover moet verschijnen.
- Kies of de popover automatisch moet sluiten (auto) of open moet blijven totdat deze door script wordt gesloten (manual).
- Kopieer de knop, popover en CSS naar uw pagina. Test in een ondersteunende browser.
Waarvoor je het kunt gebruiken
- Een help- of info-popover naast een formulierveld maken zonder JavaScript.
- Een notificatie- of account-dropdownmenuschakelaar bouwen.
- Een eenvoudige bevestigingstooltip toevoegen die verschijnt bij klikken.