Globales HTML-Attribut popover

Wert

Das Attribut popover kann einen der folgenden Werte annehmen:

"auto"

auto-Popover können durch Klicken außerhalb des Popovers oder durch Drücken der Taste Esc geschlossen werden. Wird ein auto-Popover angezeigt, werden in der Regel andere bereits angezeigte auto-Popover geschlossen, sofern sie nicht verschachtelt sind.

Hinweis: Ein leerer Wert für popover — popover oder popover="" — ist gleichbedeutend mit popover="auto".

"hint"

hint-Popover schließen beim Anzeigen keine auto-Popover. Sie schließen jedoch andere Hint-Popover, die im Hint-Stack keine ihrer Vorfahren sind. Sie können durch Klicken außerhalb geschlossen werden und reagieren auf Schließanforderungen.

"manual"

manual-Popover können nicht durch Klicken außerhalb geschlossen werden und schließen sich nicht automatisch. Sie müssen ausdrücklich über deklarative Schaltflächen zum Anzeigen, Ausblenden oder Umschalten oder über JavaScript angezeigt und geschlossen werden. Mehrere unabhängige manual-Popover können gleichzeitig angezeigt werden.

Beschreibung

Popover-Elemente sind durch display: none ausgeblendet, bis sie über ein auslösendes oder steuerndes Element (also einen <button> oder ein <input type="button"> mit dem Attribut popovertarget) oder durch einen Aufruf von HTMLElement.showPopover() geöffnet werden.

Geöffnete Popover-Elemente erscheinen über allen anderen Elementen in der obersten Ebene. Die Gestaltung über position oder overflow von übergeordneten Elementen wirkt sich nicht auf sie aus.

Popover mit dem Zustand auto können über zugehörige Steuerelemente (gekennzeichnet durch das Attribut popovertarget) angezeigt und ausgeblendet werden. Sie lassen sich außerdem durch Klicken außerhalb des Popover-Bereichs, durch Öffnen eines anderen Popovers oder über browserspezifische Mechanismen wie die Taste Esc schließen.

Im Allgemeinen kann jeweils nur ein auto-Popover auf dem Bildschirm angezeigt werden: Wird ein zweites Popover angezeigt, während bereits eines geöffnet ist, wird das erste ausgeblendet. Eine Ausnahme bilden verschachtelte Auto-Popover. Weitere Informationen finden Sie unter Verschachtelte Popover.

Sie können auch mit JavaScript gesteuert werden. Beispielsweise lässt sich mit der Methode HTMLElement.togglePopover() zwischen dem angezeigten und dem ausgeblendeten Zustand eines Popovers wechseln.

Im Gegensatz dazu müssen manual-Popover manuell angezeigt und ausgeblendet werden. Beim Anzeigen schließen sie andere Popover nicht automatisch und können nicht durch Klicken außerhalb geschlossen werden. Dadurch lassen sich mehrere Popover gleichzeitig anzeigen.

hint-Popover schließen beim Anzeigen keine auto-Popover. Sie schließen jedoch andere Hint-Popover, die im Hint-Stack keine ihrer Vorfahren sind. Sie können durch Klicken außerhalb geschlossen werden und reagieren auf Schließanforderungen.

Üblicherweise werden hint-Popover als Reaktion auf JavaScript-Ereignisse angezeigt und ausgeblendet, die nicht durch Klicken ausgelöst werden, etwa mouseover/mouseout und focus/blur. Wird eine Schaltfläche angeklickt, um ein hint-Popover zu öffnen, wird ein geöffnetes auto-Popover dabei geschlossen.

Ausführliche Informationen zur Verwendung finden Sie auf der Übersichtsseite zur Popover API.

Beispiele

Ein Element zum Popover machen

Der folgende Code stellt eine Schaltfläche dar, die beim Aktivieren ein Popover-Element öffnet. Dieses Verhalten lässt sich allein mit HTML umsetzen.

<button popovertarget="my-popover">Open Popover</button>

<div popover id="my-popover">Greetings, one and all!</div>

Popover verschachteln

In diesem Beispiel öffnet eine Schaltfläche ein Popover, das weitere verschachtelte Popover enthält. Die verschachtelten Popover können geöffnet werden, ohne das ursprüngliche Menü-Popover zu schließen.

HTML

Im ersten Teil des HTML erstellen wir einen <button>, der das Haupt-Popover öffnet: ein Menü mit mehreren Optionen.

<header>
  <button popovertarget="menu">Open Menu</button>
</header>
<main>
  <!--  Page content goes here  -->
</main>

Im zweiten Teil des HTML erstellen wir das Menü-Popover, das durch die Schaltfläche aus dem vorherigen Codeblock geöffnet wird. Dieses Menü-Popover enthält eine ungeordnete Liste von Menüpunkten. Jeder Menüpunkt hat eine Info-Schaltfläche, die ein verschachteltes Popover öffnet. Das Menü-Popover verwendet popover="auto" und wird daher nicht geschlossen, wenn die verschachtelten Popover geöffnet werden.

<!-- menu popover -->
<div id="menu" popover="auto">
  <ul>
    <li>
      <a href="#">New thing</a><button popovertarget="new-info">ⓘ</button>
    </li>
    <li>
      <a href="#">Open thing</a><button popovertarget="open-info">ⓘ</button>
    </li>
    <li>
      <a href="#">Save thing</a><button popovertarget="save-info">ⓘ</button>
    </li>
    <li>
      <a href="#">Close thing</a><button popovertarget="close-info">ⓘ</button>
    </li>
  </ul>
</div>

Im letzten Teil des HTML erstellen wir die Info-Popover für die einzelnen Menüpunkte. Jedes Popover enthält popover="hint". Daher schließt es das ursprüngliche Menü-Popover nicht, wohl aber andere geöffnete Info-Popover.

<!-- info popovers -->
<div id="new-info" class="info-popover" popover="hint">
  This is some information about <strong>creating a new</strong> thing.
</div>
<div id="open-info" class="info-popover" popover="hint">
  This is some information about <strong>opening an existing</strong> thing.
</div>
<div id="save-info" class="info-popover" popover="hint">
  This is some information about <strong>saving the current</strong> thing.
</div>
<div id="close-info" class="info-popover" popover="hint">
  This is some information about <strong>closing the current</strong> thing.
</div>

CSS

header {
  display: flex;
  justify-content: center;
}
header button {
  margin: 0.4rem auto;
}

Wir haben Ankerpositionierung verwendet, um das Menü-Popover unterhalb des <button> zu platzieren, und Grid, um die Menüpunkte und Info-Schaltflächen anzuordnen.

#menu {
  margin: 0;
  margin-top: 0.4rem;
  inset: auto;
  position-area: bottom;
}
#menu ul {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.4rem;
  padding: 0.4rem;
}
#menu li {
  grid-column: span 2;
  display: grid;
  grid: inherit;
  grid-template-columns: subgrid;
  gap: 1.4rem;
}
li [popovertarget] {
  cursor: pointer;
  font-size: 1.2rem;
}
li button {
  border: none;
  padding: 0;
  background-color: inherit;
}

Hier haben wir die Ankerpositionierung verwendet, damit die Info-Popover rechts neben ihren jeweiligen Info-Schaltflächen erscheinen.

div.info-popover {
  margin: 2rem;
  inset: auto;
  max-width: 300px;
  position-area: right;
}

Ergebnis

Klicken Sie auf die Schaltfläche Open Menu und anschließend auf die Info-Symbole (ⓘ) neben den Menüoptionen, um die Info-Popover zu öffnen.

Spezifikationen

Browser-Kompatibilität

Siehe auch

• Popover API
• HTML-Attribut popovertarget
• HTML-Attribut popovertargetaction
• CSS-Pseudoelement ::backdrop
• CSS-Pseudoklasse :popover-open