Was ist HTML-Popover-Generator?
Die HTML Popover API ermöglicht es Ihnen, Popup-Overlays, Dropdowns, Tooltips und kleine Panels nur mit HTML-Attributen wie popover und popovertarget zu erstellen. Der Browser verwaltet Öffnen, Schließen, Light-Dismiss und Stapelung ohne benutzerdefiniertes JavaScript. Dies ist nützlich für Hilfe-Popover, Benachrichtigungs-Dropdowns und einfache Menüs auf statischen Seiten.
Kurze Antwort
Erstellen Sie ein natives HTML-Popover mit der Popover API über popovertarget-Attribute. Das generierte Markup funktioniert ohne JavaScript in unterstützenden Browsern durch das browser-native Popover-Verhalten.
Last updated: 2026-06-11
Einschränkungen
- Safari und Firefox haben die Popover API in neueren Versionen hinzugefügt. iOS Safari kann Randfälle bei Light-Dismiss auf Touch-Interaktionen aufweisen.
- Komplexe interaktive Inhalte wie Formulare mit mehreren Feldern innerhalb eines Popovers können Fokus-Fallen und Tastaturnavigationsprobleme verursachen.
- Das Popover schließt bei Klick außerhalb im Auto-Modus. Verwenden Sie den Manual-Modus, wenn Nutzer mit Inhalten außerhalb des Popovers interagieren müssen.
Sources:MDN Web Docs · W3C Specifications · jquery.app on GitHub
So nutzt du dieses Tool
- Legen Sie eine eindeutige Popover-ID und den Text fest, der auf dem Auslöser-Button erscheinen soll.
- Schreiben Sie den HTML-Inhalt, der innerhalb des Popovers erscheinen soll.
- Wählen Sie, ob das Popover automatisch (auto) schließen oder per Skript (manual) geschlossen werden soll.
- Kopieren Sie Button, Popover und CSS in Ihre Seite. Testen Sie in einem unterstützenden Browser.
Wofür du es nutzen kannst
- Ein Hilfe- oder Info-Popover neben einem Formularfeld ohne JavaScript erstellen.
- Ein Benachrichtigungs- oder Konto-Dropdown-Menü bauen.
- Einen einfachen Bestätigungs-Tooltip hinzufügen, der bei Klick erscheint.