Infobox/Tooltips mit Popover

Aus SELFHTML-Wiki
Infobox(Weitergeleitet von Anchor positioning)
Wechseln zu: Navigation, Suche

Popovers sind überall im Web zu finden. Man sieht sie in Menüs, Tooltipps und Dialogen, die sich als Kontoeinstellungen, Offenlegungs-Widgets und Warenkorbvorschauen manifestieren können.

Obwohl diese Komponenten weit verbreitet sind, war ihre Erstellung in Browsern bisher überraschend kompliziert. Du musstest neben der Kernfunktionalität deines Popovers Skripte hinzufügen, um Fokus sowie Öffnungs- und Schließzustand mit Maus, Tastatur und Touchgeräten zu verwalten. Die open-ui.org hat es sich zur Aufgabe gemacht, für solche UI-Elemente optimierte Modelle zu entwerfen und diese zur Standardisierung einzureichen.[1]

Dieses Tutorial zeigt, wie du mit der neuen Popover API[2][3] schnell und einfach Tooltipps und Popups erstellst, die diese Funktionalitäten bereits browserseitig mitbringen. Es ist kein kompliziertes CSS oder gar JavaScript nötig!

Browserunterstützung
caniuse.com

popover und popovertarget

Im ersten Beispiel zeigen wir, wie wenig HTML nötig ist, um ein Popover auf- und zuklappen zu können:

Popover nur mit HTML! ansehen …
<button popovertarget="additional-info"> → mehr Infos </button>
<div id="additional-info" popover>
	<h4>Zusatz-Info</h4>
	<p>In einem HTML-Element mit popover-Attribut 
       können weitere Informationen präsentiert werden.<p>
</div>

Die wohl jedem bekannten button- und div-Elemente erhalten zwei neue Attribute:

  1. popovertarget verbindet den button mit der id des aufzuklappenden Elements
  2. popover liefert die Funktionalität. Es ist ein Universalattribut, d. h. du kannst auch andere Elemente wie aside, form, etc auf- und zuklappen.

Das popover-Attribut[4] kümmert sich mit seinem Standardverhalten um …

  • Beförderung auf den Top-Layer (oberste Ebene). Popovers werden auf einer separaten Ebene über dem Rest der Seite angezeigt, ohne dass du einen z-index setzen musst.
  • Standardmäßige Fokusverwaltung. Wenn man das Popover öffnet, wird der nächste tabindex innerhalb des Popovers angesteuert.
  • leichtes Verlassen (light-dismiss)-Funktionalität. Wenn man außerhalb des Popover-Bereichs klickt oder ESC drückt, wird das Popover geschlossen und der Fokus zurückgegeben.
  • Zugängliche Komponentenbindungen. Semantische Verknüpfung eines Popover-Elements mit einem Popover-Auslöser.

explizites Beenden

Im Gegensatz zum light dismiss, muss man einen modalen Dialog explizit beenden, z. B. über eine Schaltfläche zum Schließen und die Escape-Taste (im Zweifelsfall am besten beides hinzufügen).

Etwas Ähnliches kannst du mit dem popovertargetaction-Attribut erreichen.

Popover mit explizitem Beenden ansehen …
<button popovertarget="additional-info"> → mehr Infos </button>

<div id="additional-info" popover>
  <h4> … </h4>
  <p> … <p>
  <button popovertarget="additional-info" popovertargetaction="hide" class="close-btn">
    <span aria-hidden="true">X</span>
    <span class="sr-only">Schließen</span>
</button>
</div>

Das Beispiel erhält nun einen zweiten Button, der ebenfalls über das popovertarget mit dem popover-div verbunden ist. Das Popover kann nun aufgrund von popovertargetaction="hide" mit einem Klick auf diesen Button - aber auch mit einem light dismiss - geschlossen werden.

mehrere Popover anzeigen

Das oben erwähnte popover-Attribut hat als Defaultwert auto - Ein Öffnen eines Popovers schließt automatisch andere geöffnete Popups.

Mit dem Wert popover=manual kannst du mehrere Popovers gleichzeitig offen halten:

mehrere Popover anzeigen ansehen …
<button popovertarget="additional-info1"> → mehr Infos </button>

<div id="additional-info1" popover=manual>
  <h4>Zusatz-Info 1</h4>
  <p> … <p>
  <button popovertarget="additional-info1" popovertargetaction="hide" class="close-btn">
    …
  </button>
</div>

<button popovertarget="additional-info2"> → Popover 2</button>

<div id="additional-info2" popover=manual>
  <h4>Zusatz-Info 2</h4>
  <p> … <p>
  <button popovertarget="additional-info2" popovertargetaction="hide" class="close-btn">
    …
  </button>
</div>

Damit die Popovers nicht übereinander liegen, wurden Aussehen und Positionierung getrennt: 

[popover] {
  background: #fffbf0;
  border: thin solid #e7c157;
  max-width: 20em;
  position: absolute;
  padding: 1rem;
}

#additional-info1 {
  margin: 2rem auto;
}

#additional-info2 {
  margin: 14rem auto;
}

Alle Elemente, die ein popover-Attribut enthalten, werden mit dem Attributsselektor ausgewählt und erhalten entsprechende Formatierungen.

Über die Id werden die Popovers jeweils passend positioniert.

Gestaltung mit CSS

Inline-Tooltips

In diesem Beispiel erhält ein Text zu mehreren Fachbegriffen Zusatzinformationen:

Inline-Tooltips mit Popover ansehen …
<p>
  <button popovertarget="t1">Tooltipps</button>
  <span id="t1" popover>Infobox, die zusätzliche Informationen enthält.</span>  
  …</p>
<p>
  <button popovertarget="t2">Popovers</button>
  <span id="t2" popover>Element, das in der obersten Ebene aufplobbt.</span>
  …
  <button popovertarget="t3">open-ui.org</button>
  <span id="t3" popover>W3C Community Group, die sich die Verbesserung des Web auf die Fahnen geschrieben hat.</span>
</p>

Die Fachbegriffe werden als buttons innerhalb des Fließtexts notiert - direkt dahinter als span-Element der Informationstext. Wie in den oberen Beispielen sind die buttons über das popovertarget-Attribut mit der id des Popovers verbunden.

Du kannst den Tooltip als Sprechblase gestalten, wenn du ein weiteres Pseudoelement verwendest[5]:

Sprechblase mit Pseudoelement 
[popover] {
  background: #fffbf0;
  border: medium solid var(--accentColor);
  max-width: 20em;
  padding: 1rem;
  overflow: unset;
}

/* erzeugt ein Dreieck */
[popover]::before {
	content:"";
	--triangle-width: 2em;
	display: block;
	position:absolute;
	left: var(--triangle-width);
	bottom: calc(-1 * var(--triangle-width)); 
  border-width: var(--triangle-width) calc(0.5 * var(--triangle-width)) 0;
	border-style: solid;
  border-color: var(--accentColor) transparent;
	transition: all 0.5s;		
}

body {
	  --accentColor: #dfac20;
}

Das durch ::before erzeugte Pseudoelement hat keinen Inhalt und keine festgelegte Größe, aber einen 2em breiten Rahmen, der aber nur oben rot und sonst transparent ist. So wird ein gelbes Dreieck erzeugt, das den Eindruck einer Sprechblase erweckt.

Leider sind die Tooltips mittig zentriert. Ideal wäre, sie direkt über dem button zu positionieren. Dies wurde früher mit einer absoluten Positionierung - ausgehend von dem letzten relativ positionierten Elternelement - erreicht. Allerdings konnte sein, dass Tooltipps am Rand des Viewport über diesen herausragten und so nicht sichtbar waren.

Anchor Positioning

Mit Hilfe des CSS Anchor Positioning Modules kann die Position der Popover an die Position der öffnenden Button geknüpft werden.

Browserunterstützung
caniuse.com
Beachte: Anchor Positioning funktioniert (Stand Oktober 2025) in allen relevanten Browsern außer dem Firefox. Aber die Seiten sind auch in Browsern lesbar, die Anchor Positioning nicht unterstützen.

Für diese Verknüpfung muss im CSS festgelegt werden, auf welches Element sich die Positionsangaben der Popover beziehen. Das macht man mit der Regel zu position-anchor: 

  position-anchor: auto;

So wird jedes Popover mit seinem "Öffner" verknüpft. Zusätzlich müssen noch die Werte für margin und inset zurückgesetzt werden: 

  margin: 0;
  inset: auto;

Die Positionierung erfolgt dann durch die Funktion anchor(): 

  bottom: anchor(top);
  left: anchor(left);

Hier darf dann auch z.B. mit calc() oder max() gearbeitet werden. Über das Preudoelement :backdrop 

[popover]::backdrop {
  backdrop-filter: blur(1px);
}

wird dann bei geöffnetem Popover noch die darunter liegende Seite unscharf dargestellt.

Für Browser, die Anchor Positioning noch nicht unterstützen, werden die CSS-Regeln zur Positionierung in 

@supports (position-anchor: auto) { ... }

gelegt.

Das so erweiterte Tooltip-Beispiel zeigt jetzt die Tooltips direkt über den Button:

Inline-Tooltips mit Popover und Anchor-Technik ansehen …
[popover] {
  ...
  @supports (position-anchor: auto) {
    margin: 0;
    inset: auto;
/* Positionierung des Tooltips */
    position-anchor: auto;
    bottom: calc(anchor(top) + var(--triangle-width));
    left: max(8px,calc(anchor(left) - var(--triangle-width)));
  }
}

<button popovertarget="t1">Tooltipps</button><span id="t1" popover> ... </span>

Fazit

Die neue Popover API ist überraschend unkompliziert und einfach zu implementieren. Für „normale“ Popover ist sie dem dialog-Element vorzuziehen, das seine Stärken eher bei modalen Dialogen hat.[6]

  • modale Dialogfenster
    • dialog-Element
    • modal vs nichtmodal
    •  :backdrop

    Das UI-Element für Web-Apps

     
  • Bilder präsentieren -
    Lightbox mit Popover
    Landscape.svg
     
  • Akkordeon mit <details>
    • details und summary
    • Akkordeon
    • Registerkarten (Tab Panels)

    Besonders interessant für FAQs, um Inhalte übersichtlich zu präsentieren.

     


Ausblick

Popover wird in allen modernen Browsern unterstützt und kann frei verwendet werden.

Langfristig soll sich die Syntax erneut ändern:

Popover mit command-Attribut 
<button commandfor="my-menu" command="show-popover">
Open Menu
</button>
<div popover id="my-menu">
  <!-- ... -->
</div>

Das schon bei dialog bekannte command-Attribut übernimmt das Öffnen, commandfor stellt den Bezug zum öffnenden Element her.[7][8]


Weblinks

  1. ↑ open-ui.org: Popover API (Explainer)
  2. ↑ WHATWG: 6.12 The popover attribute
  3. ↑ MDN: Popover API
  4. ↑ developer.chrome.com: Introducing the popover API von Una Kravets, May 23, 2023
  5. ↑ Sprechblasen mit CSS:
  6. ↑ hidde.blog: Dialogs and popovers seem similar. How are they different?
  7. ↑ Introducing command and commandfor von Keith Cirkel (developer.chrome.org)
  8. ↑ Invoker_Commands_API (MDN)


Abgerufen am 16.10.2025
von "http://wiki.selfhtml.org/wiki/Infobox/Tooltips_mit_Popover"