jquery.app
Deutsch
EnglishDeutschFrancaisEspanol日本語Nederlands

HTML- & Barrierefreiheits-Tools

Kostenlose Interest Invoker Popover Generator

Generieren Sie deklaratives HTML-Markup mit interestfor fur Hover- und Fokus-ausgeloste Popovers ohne JavaScript.

Tool wird geladen...

Was ist Interest Invoker Popover Generator?

Der interestfor-Invoker-Befehl ist ein deklaratives HTML-Attribut (Chrome 142+), das ein Popover öffnet, wenn der Benutzer über das Auslöseelement fährt oder es fokussiert. Setzen Sie commandfor='popover-id' und command='interestfor' auf einen Button und popover='hint' auf das Ziel-div. Das Popover öffnet sich bei Hover UND Fokus, was es standardmäßig tastaturzugänglich macht. Dies ersetzt manuelle mouseenter/mouseleave-Handler mit popover.showPopover()/hidePopover().

Kurze Antwort

Verwenden Sie commandfor='popover-id' und command='interestfor' auf einem Button, um ein Popover bei Hover und Fokus ohne JavaScript zu öffnen. Setzen Sie popover='hint' auf das Ziel für Tooltip-Verhalten. Chrome 142+.

Last updated: 2026-06-03

Einschränkungen

  • Der interestfor-Befehl erfordert Chrome 142+. Andere Browser unterstützen ihn noch nicht, und es gibt kein Polyfill. Das Popover wird in nicht unterstützenden Browsern einfach nicht geöffnet.
  • Mit interestfor geöffnete Popover können keine interaktiven Inhalte enthalten - sie schließen, wenn der Fokus wegbewegt wird. Verwenden Sie für interaktive Popups stattdessen togglePopover oder showPopover bei Klick.
  • interestfor erfordert, dass das Popover-Ziel beim Seitenladen im DOM vorhanden ist. Dynamisch erstellte Popover-Elemente müssen registriert werden, bevor interestfor sie referenzieren kann.

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

So nutzt du dieses Tool

  1. Erstellen Sie ein Popover-Element mit dem popover-Attribut, das auf hint (für Tooltips) oder auto gesetzt ist.
  2. Fügen Sie einen Auslöse-Button mit commandfor hinzu, der auf die Popover-ID zeigt, und command, das auf interestfor gesetzt ist.
  3. Fügen Sie optional CSS für Hover-Styling auf dem Auslöser hinzu und positionieren Sie das Popover mit Anchor Positioning.
  4. Testen Sie, dass das Popover sowohl bei Maus-Hover als auch bei Tastaturfokus für Barrierefreiheit geöffnet wird.

Wofür du es nutzen kannst

  • Erstellen Sie einen zugänglichen Tooltip, der sich bei Hover und Fokus öffnet, ohne eine einzige Zeile JavaScript zu schreiben.
  • Erstellen Sie eine Hover-Kartenvorschau für Produktlinks, die Details anzeigt, wenn der Benutzer über den Link fährt oder zu ihm tabt.
  • Ersetzen Sie JavaScript-basierte Hover-Menüs durch deklarative Popover, die konsistent über Maus und Tastatur funktionieren.

Anwendungsfalle

Praxisbeispiele

Beispiel

Zugänglicher Tooltip an einem Info-Symbol

Ein Info-Symbol-Button verwendet commandfor='info-tip' und command='interestfor', um ein Popover mit popover='hint' zu öffnen. Benutzer, die mit der Maus darüberfahren, sehen den Tooltip. Tastaturbenutzer, die zum Button taben, lösen ihn ebenfalls aus - kein zusätzlicher Code nötig.

Beispiel

Produktkarten-Hover-Vorschau

Ein Produktgrid hat Popover-Hover-Karten für jeden Artikel. Das commandfor zeigt auf ein Popover mit dem Produktbild, Preis und Add-to-Cart-Button. Hover-Trigger sind schneller und einfacher als Click-to-Open-Muster.

Haufige Fehler

  • Zu vergessen, popover='hint' auf dem Popover zu setzen - die Verwendung von popover='auto' führt dazu, dass das Popover bei leichtem Schließen (Light Dismiss) geschlossen wird, was mit dem Hover-Verhalten kollidiert.
  • interestfor für kritische UI wie Formulare oder Links innerhalb des Popovers zu verwenden - das Popover schließt, wenn der Benutzer den Fokus wegbewegt, was interaktive Inhalte unzugänglich macht.
  • Kein sichtbares Hover/Fokus-Styling auf dem Auslöse-Button hinzuzufügen - Benutzer müssen wissen, welche Elemente hover-aktivierte Popover haben.

Überprüfung

  1. Fahren Sie mit der Maus über den Auslöse-Button in Chrome 142+ und bestätigen Sie, dass das Popover geöffnet wird. Bewegen Sie die Maus weg und bestätigen Sie, dass es schließt.
  2. Taben Sie mit der Tastatur zum Auslöse-Button und bestätigen Sie, dass das Popover bei Fokus geöffnet wird. Taben Sie weg und bestätigen Sie, dass es schließt.

FAQ

Fragen zu Interest Invoker Popover Generator

Was ist der Unterschied zwischen interestfor und togglePopover?

interestfor öffnet das Popover bei Hover und Fokus und schließt es, wenn der Benutzer sich wegbewegt. togglePopover öffnet und schließt bei Klick und hält das Popover geöffnet, bis erneut geklickt wird. Verwenden Sie interestfor für Tooltips und Hover-Karten. Verwenden Sie togglePopover für Menüs und Dialoge, die Klick-Interaktion benötigen.

Funktioniert interestfor mit Tastaturnavigation?

Ja. interestfor reagiert sowohl auf Maus-Hover als auch auf Tastaturfokus. Wenn ein Benutzer zum Auslöse-Button tabt, öffnet sich das Popover automatisch. Wenn er weg-tabt, schließt es sich. Dies macht interestfor-Popover standardmäßig tastaturzugänglich.

Kann ich die Verzögerung vor dem Öffnen des Popovers steuern?

Ja. Verwenden Sie die CSS-Eigenschaft interesttarget-delay auf dem Auslöseelement oder dem Popover selbst. interesttarget-delay: 300ms fügt eine 300ms Verzögerung vor dem Öffnen hinzu. Dies verhindert versehentliche Popover, wenn der Benutzer die Maus schnell über die Seite bewegt.

Verwandte Tools

Weitere html- & barrierefreiheits-tools

Auch ausprobieren

Auch ausprobieren

CSS- & Design-Tools

CSS-Karussell-Generator

Erstellen Sie natives CSS-Karussell-Markup mit Scroll-Snap, Scroll-Schaltflächen, Scroll-Markierungen und zugänglicher Listenstruktur. Kein JavaScript erforderlich.

Tool öffnen

CSS- & Design-Tools

CSS-Scroll-State-Query-Generator

Erstellen Sie CSS-scroll-state()-Container-Queries für eingerastete, fixierte oder scrollbare Elemente. Enthält einen JavaScript-Fallback für browserübergreifende Unterstützung.

Tool öffnen