TIL: Popover

Popover

Popovers kennt man im Web von Menüs, Dialogen oder Tooltipps, von Warenkorbvorschau, Konteneinstellungen usw.

Sie erscheinen am Bildschirm oberhalb des restlichen Inhalts. Trotz ihrer weiten Verbreitung war deren Erstellung bislang ziemlich kompliziert.

Es bedurfte komplexer Konstrukte aus HTML, reichlich CSS und viel JavaScript, um mittels DIALOG, MODAL, New WINDOW etc. ein Popover zu generieren.

Popover API

Seit April 2024 unterstützen alle modernen Browser die Popover API. Damit genügen wenige Zeilen HTML, um ein Popover zu erstellen.

Dessen Erscheinungsbild kann per CSS angepasst werden.

Hinweis:
Derzeit können nur 2 HTML-Elemente ein Popover auslösen: BUTTON bzw. INPUT type="button"

Popover-Erstellung

einfachste Form

<button popovertarget="d01"> mehr </button>

	<div id="d01" popover> Hier kommt die Zusatzinformation (oder Bilder etc.) </div>

Beispiel:

Hier kommt die Zusatzinformation (oder Bilder etc.)

Also:

BUTTON mit POPOVERTARGET ausstatten
Element mit Attribut POPOVER und ID ausstatten

Standard-Erscheinungsbild

Popover-Elemente sind per se unsichtbar bis zum Auslösen des aufrufenden Elements (Button).

Sie erscheinen bildschirmzentriert in der vom Inhalt bestimmten Breite, sind schwarz umrahmt und legen sich ohne Störung des restlichen Inhalts als oberste Ebene obenauf.

Erneutes Anklicken des aufrufenden Elements, Mausklick außerhalb der Popoverfläche bzw. Drücken von ESC lässt das Povover wieder verschwinden.

Popover-Gestaltung

Per CSS lässt sich das Aussehen des Popoverelements wie gewohnt gestalten.

div#d02
{padding:.5em 1.2em; border:6px double maroon; border-radius:16px; box-shadow:50px 5px 40px #333;}

Beispiel:

Zusätzliche Gestaltungsmöglichkeiten bieten die Pseudo-Klasse :popover-open und das Pseudo-Element ::backdrop

:popover-open verändert den Style geöffneter Popover-Elemente (z. B. andere Position als zentriert, vorbestimmte Größen usw.).

::backdrop erlaubt das von MODAL bekannte Hintergrundausblenden

::backdrop {background:rgba(33,33,33,0.5)}

Gestaltetes Popover

Zusätzlich wurde ein -Element eingebaut.

Animiertes Popover

Mit Firefox 129 hielt die CSS-Eigenschaft transition-behavior Einzug mit den Werten: normal bzw. allow-discrete.

Das ermöglicht bessere Übergänge bei Animationen wie z. B. beim POPOVER. Dazu folgendes CSS für eine Änderung von Opacity und Verformung:

[popover]:popover-open {
  opacity: 1;
  transform: scaleX(1);
}
	
[popover] {
  /* Zurückstellen nach Ende der Animation	*/
  opacity: 0;
  transform: scaleX(0);
  transition-property: opacity, transform, overlay, display;
  transition-duration: 0.7s;
  transition-behavior: allow-discrete;
  /* oder in Kurzform:
    transition: all 0.7s allow-discrete;
  */
}

/* Regel, die nach voriger [popover]:popover-open Regel 
   einen definierten Anfangszustand bewirkt	 */
@starting-style {
  [popover]:popover-open {
    opacity: 0;
    transform: scaleX(0);
  }
}