HTML popover globales Attribut

Wert

Das popover-Attribut kann einen der folgenden Werte annehmen:

"auto"

auto Popovers können "leicht verworfen" werden – das bedeutet, dass Sie das Popover ausblenden können, indem Sie außerhalb davon klicken oder die Esc-Taste drücken. Das Anzeigen eines auto Popovers wird in der Regel andere bereits angezeigte auto Popovers schließen, es sei denn, sie sind verschachtelt.

Hinweis: Das Setzen eines leeren Wertes für popover — popover oder popover="" — ist gleichbedeutend mit dem Setzen von popover="auto".

"hint"

hint Popovers schließen keine auto Popovers, wenn sie angezeigt werden, schließen jedoch andere hint Popovers. Sie können leicht verworfen werden und reagieren auf Schließanfragen.

"manual"

manual Popovers können nicht "leicht verworfen" werden und werden nicht automatisch geschlossen. Popovers müssen explizit mit deklarativen Anzeigen-/Ausblenden-/Umschaltknöpfen oder JavaScript angezeigt und geschlossen werden. Mehrere unabhängige manual Popovers können gleichzeitig angezeigt werden.

Beschreibung

Popover-Elemente sind über display: none versteckt, bis sie über ein auslösendes/steuerndes Element (z. B. ein <button> oder <input type="button"> mit einem popovertarget-Attribut) oder einen HTMLElement.showPopover()-Aufruf geöffnet werden.

Wenn geöffnet, erscheinen Popover-Elemente über allen anderen Elementen in der obersten Schicht und werden nicht von Stilen wie position oder overflow von Elternelementen beeinflusst.

Popovers, die sich im auto-Zustand befinden, können mit zugehörigen Steuerelementen (durch das popovertarget-Attribut) ein- und ausgeschaltet werden und durch Klicken außerhalb des Popover-Bereichs, Öffnen eines anderen Popovers oder Drücken von browserspezifischen Mechanismen wie der Esc-Taste "leicht verworfen" werden.

In der Regel kann jeweils nur ein auto Popover auf dem Bildschirm angezeigt werden – das Anzeigen eines zweiten Popovers, während eines bereits gezeigt wird, blendet das erste aus. Die Ausnahme von dieser Regel ist, wenn Sie verschachtelte auto Popovers haben. Weitere Details finden Sie unter Verschachtelte Popovers.

Sie können auch mit JavaScript gesteuert werden, zum Beispiel kann die HTMLElement.togglePopover()-Methode verwendet werden, um ein Popover zwischen angezeigt und verborgen umzuschalten.

Dagegen müssen manual Popovers manuell ein- und ausgeblendet werden – sie schließen nicht automatisch andere Popovers, wenn sie angezeigt werden und können nicht "leicht verworfen" werden. Dies ermöglicht Anwendungsfälle, in denen Sie mehrere Popovers gleichzeitig zeigen möchten.

hint Popovers schließen keine auto Popovers, wenn sie angezeigt werden, aber schließen andere hint Popovers. Sie können leicht verworfen werden und reagieren auf Schließanfragen.

In der Regel werden hint Popovers als Antwort auf nicht-klickende JavaScript-Ereignisse wie mouseover/mouseout und focus/blur angezeigt und verborgen. Das Klicken auf einen Knopf zum Öffnen eines hint Popovers würde ein geöffnetes auto Popover leicht verwerfen.

Für detaillierte Informationen zur Verwendung siehe die Popover API Startseite.

Beispiele

Ein Element zu einem Popover machen

Der folgende Code rendert einen Knopf, der beim Aktivieren ein Popover-Element öffnet. Dieses Verhalten kann allein mit HTML erreicht werden.

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

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

Verschachtelung von Popovers

In diesem Beispiel öffnet ein Knopf ein Popover, das zusätzliche verschachtelte Popovers enthält. Die verschachtelten Popovers 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, das ein Menü mit einigen Optionen enthält.

<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 den Knopf geöffnet wird, den wir im vorherigen Codeblock erstellt haben. Dieses Menü-Popover enthält eine ungeordnete Liste von Menüelementen, von denen jedes einen Info-Knopf hat, der ein verschachteltes Popover öffnet. Das Menü-Popover verwendet popover="auto", was bedeutet, dass es nicht geschlossen wird, wenn die verschachtelten Popovers 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-Popovers für jedes Menüelement. Jedes Popover enthält popover="hint", was bedeutet, dass es nicht das ursprüngliche Menü-Popover schließt, aber die anderen offenen Info-Popovers.

<!-- 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>-Elements zu positionieren und Grid, um die Menüelemente und Infoknöpfe 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 Ankerpositionierung verwendet, um die Info-Popovers rechts von ihren jeweiligen Infoknöpfen erscheinen zu lassen.

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

Ergebnis

Klicken Sie den Open Menu Knopf, dann klicken Sie die Info-Icons (ⓘ) neben den Menüoptionen, um die Info-Popovers zu öffnen.

Spezifikationen

Browser-Kompatibilität

Siehe auch

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