Naslag / Attribuut
popovertarget HTML attribuut
2 elementen kennen dit attribuut. Klik op een tag voor de volledige uitleg van dat element.
Wat doet het popovertarget attribuut?
Verwijst naar de id van het element met een popover-attribuut dat door deze knop geopend of gesloten wordt, zonder dat daar JavaScript voor nodig is.
HTML
<button popovertarget="info-popover">Toon info</button>
<div id="info-popover" popover>
Extra informatie
</div>Welke HTML-elementen kennen popovertarget?
<button>
Het <button>-element van HTML is een interactief element dat door een gebruiker wordt geactiveerd met een muis, toetsenbord, vinger, spraakc...
Maakt van een
Alles over <button> →
<button>-element een popover-controleknop; heeft als waarde de ID van het te besturen popover-element. Het vastleggen van een relatie tussen een popover en de bijbehorende invoker-knop met behulp van het popovertarget-attribuut heeft twee extra nuttige effecten:
- De browser creëert een impliciete
aria-details- enaria-expanded-relatie tussen popover en invoker, en plaatst de popover op een logische positie in de volgorde van toetsenbordfocusnavigatie wanneer deze wordt getoond. Dit maakt de popover toegankelijker voor gebruikers van toetsenbord en ondersteunende technologie (AT) (zie ook Toegankelijkheidsfuncties van popovers). - De browser creëert een impliciete ankerverwijzing tussen de twee, waardoor het zeer handig wordt om popovers te positioneren ten opzichte van hun bedieningselementen met behulp van CSS-ankerpositionering. Zie Ankerpositionering van popovers voor meer details.
<input>
Het <input>-element van HTML wordt gebruikt om interactieve besturingselementen te maken voor webformulieren, om gegevens van de gebruiker t...
Maakt van een
Alles over <input> →
<input type="button">-element een popover-besturingsknop; neemt als waarde de ID van het popover-element dat aangestuurd wordt. Zie de landingspagina van de Popover API voor meer details. Het tot stand brengen van een relatie tussen een popover en zijn oproepende knop met behulp van het popovertarget-attribuut heeft twee extra nuttige effecten:
- De browser maakt een impliciete
aria-details- enaria-expanded-relatie tussen de popover en de oproeper, en plaatst de popover op een logische positie in de volgorde van toetsenbordfocusnavigatie wanneer deze wordt weergegeven. Dit maakt de popover toegankelijker voor gebruikers van toetsenbord en ondersteunende technologie (zie ook Toegankelijkheidsfuncties van popovers). - De browser maakt een impliciete ankerverwijzing tussen de twee, wat het erg gemakkelijk maakt om popovers te positioneren ten opzichte van hun besturingselementen met behulp van CSS-ankerpositionering. Zie Popover-ankerpositionering voor meer details.