HTML- en toegankelijkheidstools

Gratis Interest Invoker Popover Generator

Genereer declaratieve HTML-markup met interestfor voor hover- en focus-getriggerde popovers zonder JavaScript.

Tool laden...

Wat is Interest Invoker Popover Generator?

Het interestfor invoker-commando is een declaratief HTML-attribuut (Chrome 142+) dat een popover opent wanneer de gebruiker over of focust op het triggerelement. Stel commandfor in op de popover-id en command op interestfor op een knop, en popover=hint op het doel-div. De popover opent bij hover EN focus, waardoor het standaard toetsenbordtoegankelijk is.

Snel antwoord

Gebruik commandfor=popover-id en command=interestfor op een knop om een popover te openen bij hover en focus zonder JavaScript. Stel popover=hint in op het doel voor tooltip-gedrag. Chrome 142+.

Last updated: 2026-06-03

Beperkingen

  • Vereist Chrome 142+. Andere browsers ondersteunen het nog niet.
  • Popovers met interestfor kunnen geen interactieve content bevatten.
  • De popover moet bij paginalading in de DOM staan.

Sources:MDN Web Docs · W3C Specifications · jquery.app on GitHub

Zo gebruik je deze tool

  1. Maak een popover-element met het popover-attribuut ingesteld op hint.
  2. Voeg een triggerknop toe met commandfor verwijzend naar de popover-id en command ingesteld op interestfor.
  3. Voeg optioneel CSS toe voor hover-styling en positioneer de popover met anchor positioning.
  4. Test of de popover opent bij zowel muishover als toetsenbordfocus.

Waarvoor je het kunt gebruiken

  • Maak een toegankelijke tooltip die opent bij hover en focus zonder JavaScript.
  • Bouw een hover card-voorbeeld voor productlinks.
  • Vervang JavaScript-gebaseerde hover-menu's door declaratieve popovers.

Gebruik

Praktische voorbeelden

Voorbeeld

Toegankelijke tooltip op een info-icoon

Een info-icoonknop gebruikt commandfor=info-tip en command=interestfor om een popover met popover=hint te openen. Zowel muis- als toetsenbordgebruikers zien de tooltip.

Voorbeeld

Productkaart hover-voorbeeld

Een productraster heeft popover hover-kaarten. commandfor verwijst naar een popover met productafbeelding, prijs en winkelwagenknop.

Veelgemaakte fouten

  • Vergeten popover=hint in te stellen — popover=auto veroorzaakt conflicten met hover-gedrag.
  • interestfor gebruiken voor interactieve content zoals formulieren — de popover sluit bij focusverlies.
  • Geen zichtbare hover/focus-styling toevoegen aan de triggerknop.

Verificatie

  1. Hover over de triggerknop in Chrome 142+ en controleer of de popover opent en sluit.
  2. Tab naar de triggerknop en controleer of de popover opent bij focus.

FAQ

Vragen over Interest Invoker Popover Generator

Wat is het verschil tussen interestfor en togglePopover?

interestfor opent bij hover/focus en sluit bij wegnemen. togglePopover opent en sluit bij klik. Gebruik interestfor voor tooltips en togglePopover voor menu's.

Werkt interestfor met toetsenbordnavigatie?

Ja. interestfor reageert op zowel muishover als toetsenbordfocus. De popover opent bij tabben en sluit bij wegtabben.

Kan ik de vertraging voor het openen regelen?

Ja. Gebruik de CSS-attribuut interesttarget-delay op het triggerelement voor een aangepaste vertraging in milliseconden.

Gerelateerde tools

Meer html- en toegankelijkheidstools

Probeer ook

Probeer ook

CSS- en ontwerptools

CSS-carrouselgenerator

Genereer native CSS-carrouselmarkup met scroll-snap, scrollknoppen, scrollmarkeringen en een toegankelijke lijststructuur. Geen JavaScript nodig.

Open tool

CSS- en ontwerptools

CSS Scroll-State-querygenerator

Genereer CSS scroll-state()-containerqueries om gesnapte, vastgezette of scrollbare elementen te stylen. Inclusief JavaScript-fallback voor ondersteuning in andere browsers.

Open tool