Popover Popups

The popover component displays additional content in a floating panel. Unlike tooltips, popovers remain open until explicitly closed and can contain interactive elements.

For short explanatory text (1-2 words), use the tooltip component instead.

WCAG AA
JavaScript

Funktionen

  • Persistent display: Stays open until closed, unlike tooltips.

  • Interaktive Inhalte: Können Schaltflächen, Links und andere Elemente enthalten.

  • Platzierung: Wird in der Nähe des Auslöseelements angezeigt, ohne das Layout zu stören.

JS

Verwendung

Um ein Popover hinzuzufügen, wird ein Auslöser gebraucht, welcher beim Hovern das Popover erscheinen lässt. Dieser Auslöser kann jedes beliebe HTML-Tag sein und benötigt das Attribut data-insight-popover, dessen Wert die ID des Ziel-Elements (Popover) ist. Das Popover kann komplett selbst definiert werden, lediglich die Verbindung durch die Tag-ID ist zu beachten.

<button data-insight-popover="demo-popover" data-show-arrow="true" data-position="top" class="btn btn-primary">Hover me!</button> <div id="demo-popover" class="bg-white dark:bg-gray-500 w-64 border border-gray-300 dark:border-0 rounded-insight-overlay shadow-insight-overlay"> <!-- Content --> </div>

Parameter

Laden…
Name Typ Beschreibung Standardwert Erforderlich
data-insight-popover='<target-id>' str

Bestimmt das Popover-Objekt, welches beim Hovern angezeigt werden soll.

 '' False
data-position='<position>' str

Bestimmt, wo im Bezug auf das Element der Popover angezeigt werden soll. Mögliche Werte sind: 'top' (darüber), 'bottom' (darunter), 'right' (rechts), und 'left' (links).

 '' False
data-show-arrow bool

Zeigt am Rand des Popovers einen Pfeil hin zum auslösenden Objekt an.

 False False
data-follow-mouse bool

Das Popup folgt der Mausposition.

 False False

Barrierefreiheit

WCAG AA WCAG AAA
Status
N/A

WCAG AA (Grundlagen)

  • Das Popover verfügt über die Attributangabe role='dialog', damit es von Screenreadern korrekt erkannt wird.

  • Der Trigger verfügt über die Attribute aria-expanded und aria-controls, um den Status korrekt zu kommunizieren.

  • Das Popover wird geschlossen, wenn man außerhalb davon klickt.

  • Positionsaktualisierungen bleiben beim Scrollen sichtbar.

  • Tastaturunterstützung: Mit der Eingabetaste oder der Leertaste werden die durch Klicks ausgelösten Popovers ein- und ausgeblendet, mit der Escape-Taste werden sie geschlossen.

  • Der Fokus kann für interaktive Inhalte (Schaltflächen, Links) in das Popover wechseln.

Verwandte Themen