De Popover API
Maak tooltips en dialogen met het native popover-attribuut
De Popover API is een gratis HTML Academy-les op CoddyKit. Dit is les 2 van 4. Je kunt 3 lessen uit dit leerpad gratis volledig lezen — daarna ontgrendelt CoddyKit PRO alle lessen, plus praktische oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. Deze les maakt deel uit van het leertraject HTML Academy. Je voortgang wordt gesynchroniseerd op het web en in de CoddyKit-app. De cursus HTML Academy bevat in totaal 4 lessen.
Wat de Popover API doet
De Popover API biedt HTML een ingebouwde manier om popovers, dialogen, tooltips en menu's te maken — zonder handmatige JavaScript voor positionering, focusbeheer, sluiten bij een klik buiten de popover of sluiten met Escape. Het ingebouwde gedrag sluit aan bij de verwachtingen van gebruikers.
Het popover-attribuut
Voeg popover toe aan elk element om er een popover van te maken. Het is standaard verborgen. Een activeringsknop met popovertarget="popover-id" toont het element bij een klik. De browser beheert de open-/sluitstatus automatisch.
<button popovertarget="info">Show details</button>
<div id="info" popover>
<p>Here is some popover content.</p>
</div>Popovermodi
popover="auto" (standaard) — sluit bij een klik buiten de popover of bij Escape; er kan maar één automatische popover tegelijk geopend zijn. popover="manual" — wordt niet automatisch gesloten; je moet de popover expliciet sluiten via JS of een andere activeringsknop.
Activeringsknoppen
Het attribuut popovertarget koppelt een knop op basis van id aan een popover. De browser beheert het schakelgedrag: klik op de knop om de popover te tonen, klik opnieuw of klik erbuiten om die te sluiten. Voor basisgebruik zijn geen gebeurtenisafhandelaars nodig.
Rendering in de bovenste laag
Popovers worden in de bovenste laag gerenderd — boven alle andere inhoud, ongeacht z-index of stapelcontext. Hiermee verdwijnt de klassieke fout waarbij een modal verborgen raakt achter een ouder met "overflow:hidden", een probleem dat zelfgebouwde popovers vaak plaagt.
Programmatisch tonen en verbergen
JavaScript kan popovers tonen of verbergen: element.showPopover(), element.hidePopover(), element.togglePopover(). De betekenis is hetzelfde als bij de declaratieve activering — sluiten bij een klik buiten de popover blijft werken voor de automatische modus.
toggle-gebeurtenis
Popovers activeren een toggle-gebeurtenis wanneer hun status verandert. De newState van de gebeurtenis is "open" of "closed". Dit is nuttig voor analyses, focusbeheer of het afstemmen van andere onderdelen van de gebruikersinterface op de open status van de popover.
popoverEl.addEventListener("toggle", (e) => {
console.log("Popover is now", e.newState);
});CSS-pseudoklasse
De pseudoklasse :popover-open komt overeen met popovers in hun geopende toestand. Baseer overgangen, transparantie en transformaties op deze toestand: [popover]:popover-open { opacity: 1; transform: none; }.
Ankerpositionering
In combinatie met de CSS Anchor Positioning API kunnen popovers automatisch ten opzichte van hun activeringsknop worden gepositioneerd — voor het klassieke patroon van een tooltip naast een knop is geen JavaScript nodig. Beide functies maken deel uit van dezelfde moderne ontwikkeling richting eenvoudige bouwstenen voor gebruikersinterfaces.
Toegankelijkheid
De browser zorgt bij modale popovers voor focusinsluiting, zet de focus bij het sluiten terug naar de activeringsknop en kondigt de open status van de popover aan schermlezers aan. Dit zelf bouwen vereist veel ARIA-steuncode; de Popover API levert dit standaard.
Browserondersteuning
Chrome en Safari ondersteunen de Popover API; Firefox heeft recenter ondersteuning toegevoegd. Voor bredere compatibiliteit bestaat er een kleine polyfill. Nieuwe projecten kunnen de ingebouwde implementatie leveren en oudere browsers stapsgewijs uitbreiden.
Oude patronen vervangen
Veel JavaScript-bibliotheken voor modals (sweetalert, react-modal) bestaan vooral om te omzeilen wat de Popover API nu standaard doet. Plan een migratie: kleinere bundels, betere standaardinstellingen en minder code om te onderhouden. De Popover API is een van de grootste verbeteringen aan HTML in jaren.
Kennistoets
Wat doet popover="auto" wel wat popover="manual" niet doet?
Samenvatting
De Popover API voegt het popover-attribuut toe, plus de JS-methoden showPopover/hidePopover/togglePopover, koppeling van activeringsknoppen via popovertarget, rendering in de bovenste laag boven alle stapelcontexten, de :popover-open-pseudoklasse en toggle-gebeurtenissen. In de automatische modus wordt een popover gesloten bij een klik buiten; de handmatige modus vereist expliciete bediening. Hiermee vervang je de meeste aangepaste bibliotheken voor modals en tooltips door één HTML-primitief die toegankelijkheid, focus en z-index correct afhandelt.
Leer HTML met een AI-tutor — gratis
Schrijf echte code en voer die uit in je browser, krijg direct hulp van een AI-tutor die 24/7 beschikbaar is en ga verder waar je gebleven bent op het web of in de app.
- Cursussen
- 40
- Lessen
- 159
Veelgestelde vragen
Is de les “De Popover API” gratis?
Ja — je kunt hier op het web alle 3 lessen van het leerpad HTML Academy, waaronder “De Popover API”, gratis volledig lezen. Daarna ontgrendelt CoddyKit PRO alle lessen, plus interactieve oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. De cursus HTML Academy bevat in totaal 4 lessen.
Wat leer ik in “De Popover API”?
Maak tooltips en dialogen met het native popover-attribuut Je oefent met HTML Academy door code rechtstreeks in de browser uit te voeren. Een AI-begeleider die 24/7 beschikbaar is beantwoordt je vragen terwijl je de les doorwerkt.
Heb ik ervaring nodig om met HTML Academy te beginnen?
Ervaring vooraf is niet nodig. HTML Academy op CoddyKit is opgebouwd voor beginners tot gevorderden, zodat je hier of bij het begin kunt starten en in je eigen tempo kunt leren. Dit is les 2 van 4.
Hoe lang duurt de les “De Popover API”?
De meeste lessen van CoddyKit duren ongeveer 5–10 minuten. Elke les is kort en interactief, zodat je gestaag vooruitgaat en op het web en in de app precies verdergaat waar je was gebleven.
Kan ik code schrijven en uitvoeren in deze les over HTML Academy?
Ja. Elke les over HTML Academy bevat een ingebouwde code-editor, zodat je rechtstreeks in je browser echte code kunt schrijven en uitvoeren en direct feedback van AI krijgt — lokale installatie is niet nodig.
Alle lessen in deze cursus
- Declaratieve Shadow DOM
- De Popover API
- Het selectlist-element
- Interest Invokers en het command-attribuut