Popover

Ein Hinweis, der beim Klick auf einen Knopf aufgeht und beim Klick daneben wieder verschwindet, hat lange eine Bibliothek gebraucht oder ein paar Dutzend Zeilen JavaScript. Klicks abfangen, Escape abfangen, den Fokus verschieben und das Fenster über alles andere legen, und an eins davon dachte man meistens nicht. Inzwischen kann HTML das selbst.

01 / 04Zwei Attribute

<button popovertarget="hinweis">Nährwerte anzeigen</button>

<div id="hinweis" popover>
  <h2>Nährwerte je Portion</h2>
  <p>Rund 320 Kalorien, 18 Gramm Eiweiß.</p>
  <button popovertarget="hinweis" popovertargetaction="hide">Schließen</button>
</div>

<details>
  <summary>Zutaten</summary>
  <p>200 g braune Linsen, ein Bund Suppengrün, vier Wiener Würstchen.</p>
</details>

Ein Klick auf „Nährwerte anzeigen“ öffnet das Fenster, ein Klick daneben schließt es wieder, die Escape-Taste ebenso. JavaScript steht nirgends.

Das Element, das erscheinen soll, trägt popover. Ohne Wert geschrieben heißt das popover="auto". Solange es nicht geöffnet ist, bleibt sein Inhalt versteckt, egal wo es im Markup steht.

Der Knopf trägt popovertarget, mit der id des Popovers als Wert. Von sich aus schaltet er um, er öffnet ein geschlossenes Popover und schließt ein offenes. Mit popovertargetaction="show" oder "hide" legt er sich auf eine Richtung fest, so wie der Schließen-Knopf im Beispiel.

02 / 04Was es von selbst mitbringt

Das Ein- und Ausblenden ist der kleinste Teil. Ein Popover mit popover="auto" bekommt dazu vier Dinge geschenkt.

• Schließen per Klick daneben (englisch light dismiss). Ein Klick irgendwo außerhalb schließt es.
• Schließen mit Escape, ohne dass man die Taste selbst abfragt.
• Die oberste Ebene (top layer). Es liegt über allem anderen auf der Seite, auch über Elementen, die im Code weiter unten stehen.
• Den Fokus. Der nächste Tab-Schritt nach dem Knopf führt ins Popover, egal an welcher Stelle im Markup es steht. Beim Schließen kehrt der Fokus auf den Knopf zurück, sofern er drinnen lag.

Mit popover="manual" fallen die ersten beiden weg. Dann bleibt das Fenster offen, bis ein Knopf es schließt, und mehrere davon können gleichzeitig offen sein. Das passt zu einer Meldung, die stehen bleiben soll, bis man sie selbst wegklickt.

Gesperrt wird die Seite dabei nie. Im Beispiel lässt sich „Zutaten“ aufklappen, während das Popover offen ist, und derselbe Klick schließt es nebenbei. Für einen Hinweis, ein Menü unter einem Knopf oder eine Erklärung neben einem Formularfeld ist das genau richtig.

03 / 04Der Knopf muss ein Knopf sein

<button popovertarget="echt">Mit einem button</button>
<div id="echt" popover>
  <p>Mit Tab erreichbar, mit Escape zu schließen.</p>
</div>

<div popovertarget="nachgebaut">Mit einem div</div>
<div id="nachgebaut" popover>
  <p>Dieses Fenster geht nie auf.</p>
</div>

Oben ein button mit popovertarget, unten ein div mit genau demselben Attribut. Der Knopf öffnet sein Fenster, das div tut gar nichts, auch nicht beim Klick mit der Maus. popovertarget wirkt nur an einem button und an einem input, das ein Knopf ist. An allen anderen Elementen übergeht der Browser es, und eine Meldung gibt es dazu nicht.

Hier sieht man dem div an, dass es keiner ist, weil es ohne CSS wie gewöhnlicher Text dasteht. In einem echten Projekt bekäme es Rahmen und Hintergrund und wäre vom Knopf darüber nicht zu unterscheiden. Mit der Tab-Taste erreicht man es trotzdem nicht, einen Fokusring hat es nicht, und ein Screenreader sagt es nicht als Schaltfläche an.

Das ist derselbe Gedanke wie beim summary in der letzten Lektion. Die eingebauten Elemente bringen Tastatur, Fokus und Ansage mit, das div bringt nichts davon mit.

04 / 04Wo ein Popover nicht reicht

Ein Popover stellt eine Frage, wartet aber nicht auf die Antwort. Wer daneben klickt, ist sie los und arbeitet weiter. Für „Rezept wirklich löschen?“ ist das zu wenig, da soll es erst weitergehen, wenn jemand Ja oder Nein gesagt hat. Dafür gibt es dialog, und das ist die nächste Lektion.