HTML Popover API: popovertarget, showPopover, events | We.Inc
Probeer de Popover API live: auto-, manual- en hint-popovers, popovertarget-knoppen, showPopover, hidePopover en togglePopover, plus een log van beforetoggle- en toggle-events.
Voeg het popover-attribuut toe aan een element en laat een knop ernaar wijzen met popovertarget="id", en de browser regelt openen, sluiten, de top layer en Escape voor u, zonder JavaScript. In scripts roept u showPopover(), hidePopover() of togglePopover() aan en luistert u naar de events beforetoggle en toggle. popover="auto" sluit als u erbuiten klikt; manual doet dat niet.
Soorten popovers
Waarde
Sluit bij klik erbuiten of Escape
Andere popovers
popover of popover="auto"
Ja
Eén openen sluit andere auto-popovers, behalve de voorouders ervan
popover="manual"
Nee, u sluit hem zelf
Er kunnen er willekeurig veel tegelijk open zijn
popover="hint"
Ja
Sluit andere hint-popovers die geen voorouders zijn; bedoeld voor tooltips
Popovers betekenden vroeger een positioneringslibrary, een handler voor klikken erbuiten en een gevecht met z-index. De Popover API verplaatst dat allemaal naar HTML. De playground hieronder maakt een echte popover in uw browser, zodat u het type kunt wisselen, hem vanuit code kunt aansturen en de events in volgorde kunt zien afgaan.
Kies auto, manual of hint voor de popover in de playground.
Open hem met de declaratieve knop, of roep de drie methoden aan met de scriptknoppen.
Klik erbuiten of druk op Escape om te zien welke types vanzelf sluiten.
Lees de eventlog: eerst gaat beforetoggle af, daarna toggle, elk met oldState en newState.
Alleen button- en input-elementen kunnen popovertarget dragen. Gebruik een echte knop zodat toetsenbordgebruikers hem kunnen bereiken.
popovertargetaction accepteert toggle (de standaard), show of hide, dus voor aparte open- en sluitknoppen is geen script nodig.
Style de open toestand met :popover-open en dim de pagina erachter met ::backdrop.
Een popover is niet modaal. Gebruik voor een formulier dat ingevuld moet zijn voordat de gebruiker terug kan naar de pagina een dialog die met showModal() wordt geopend.
Getoonde popovers staan in de top layer, dus u hebt geen hoge z-index meer nodig om ze boven al het andere te houden.
Veelgestelde vragen
Welke browsers ondersteunen de Popover API?
MDN markeert de Popover API sinds januari 2025 als Baseline newly available, wat betekent dat hij werkt in de nieuwste versies van de grote browsers. Sommige nieuwere onderdelen, zoals de waarde hint, kunnen minder breed ondersteund zijn, dus bekijk de compatibiliteitstabel voordat u erop vertrouwt.
Wat is het verschil tussen auto- en manual-popovers?
Een auto-popover kent light dismiss: klikken erbuiten of op Escape drukken sluit hem, en hem openen sluit andere auto-popovers. Een manual-popover blijft open tot een knop of script hem sluit, en er kunnen er meerdere tegelijk open zijn, wat goed past bij toasts.
Sluit Escape elke popover?
Escape sluit auto- en hint-popovers, dezelfde die ook sluiten bij een klik erbuiten. Een manual-popover negeert beide, dus die heeft een eigen sluitknop of een hidePopover()-aanroep nodig.
Hoe weet ik wanneer een popover opent of sluit?
Luister naar het toggle-event op het popover-element. De newState daarvan is "open" of "closed". Het beforetoggle-event gaat net vóór de wijziging af, de plek om inhoud voor te bereiden.
Waar verschijnt een popover standaard?
In het midden van de viewport, met fixed positioning, in de top layer. Verplaats hem met uw eigen CSS, of met anchor positioning waar de browser dat ondersteunt.
Eerst declaratief
De meeste popovers hebben helemaal geen script nodig. De knop en de popover zijn via id gekoppeld, en de browser regelt het wisselen, light dismiss en de Escape-toets.
Grijp naar showPopover() en zijn broertjes als de trigger geen knop is, bijvoorbeeld om een hint te openen na een mislukte formuliercontrole of een toast met een timer te sluiten.
Menu's, toasts en tips
Auto past bij menu's en pickers die moeten verdwijnen zodra de aandacht ergens anders heen gaat. Manual past bij meldingen die zich opstapelen en blijven staan tot ze worden weggeklikt. Hint is bedoeld voor tooltips bij hover en focus.
Welk type ook, houd de inhoud kort en zorg dat elke actie erin ook met het toetsenbord bereikbaar is.
Naslag Popover API
Attributen, methoden, events en selectors
Naam
Soort
Wat het doet
Globaal attribuut
Maakt van het element een popover: auto, manual of hint
Attribuut op button of input
Id van de popover die het element opent en sluit
Attribuut op button of input
toggle (standaard), show of hide
showPopover()
Methode
Voegt de popover toe aan de top layer
hidePopover()
Methode
Haalt hem uit de top layer en verbergt hem
togglePopover()
Methode
Toont hem als hij verborgen is, verbergt hem als hij zichtbaar is
Event
Gaat af vóór de toestand verandert; heeft oldState en newState
Event
Gaat af nadat de toestand is veranderd; heeft oldState en newState
:popover-open
CSS-pseudoklasse
Matcht een popover zolang die zichtbaar is
::backdrop
CSS-pseudo-element
De laag achter een getoonde popover
Popover-voorbeelden zonder JavaScript
Deze frames draaien met scripts uitgeschakeld, en de popovers werken nog steeds, omdat het gedrag uit HTML komt.
Een menu als auto-popover
Klik op de knop en klik daarna ergens anders of druk op Escape. Het menu sluit zichzelf.
Een manual-toast met aparte knoppen voor tonen en verbergen
Klikken erbuiten doet hier niets. Alleen de verbergknop sluit hem.
De pagina achter een popover dimmen
::backdrop stylet de laag onder de popover. Hij is nog steeds niet modaal; klikken op de pagina erachter sluit hem.
Een popover aansturen vanuit JavaScript
Methoden, events en feature detection
Controleer ondersteuning voordat u de methoden aanroept, en lees daarna newState uit in het toggle-event.
Popover-playground
Uw browser draait hier een echte popover: wissel het type, roep de methoden aan en lees de eventlog.
Declaratieve knop (popovertarget)
Scriptmethoden
Ik ben een {v}-popover. Klik erbuiten of druk op Escape om light dismiss te testen.
Sluiten
Toestand: {v}
Eventlog
Log wissen
Nog geen events.
Deze browser ondersteunt de Popover API niet, dus de playground staat uit.