HTML/Attribute/popovertarget

Browserunterstützung
caniuse.com

Das popovertarget-Attribut ist ein Teil der Popover Schnittstelle und ermöglicht es, mit einem Button ein neues Element ein- oder auszublenden (das Popover-Element), ohne dafür JavaScript zu benötigen. Die genaue Aktion wird mit dem Attribut popovertargetaction festgelegt.

erlaubte Werte	Zeichenkette (Id des Popover-Elements)
default-Wert
erlaubt in	button, input mit type="button"

Beispiel

<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>

Ein div erhält ein popover-Attribut und einen Button. Dieser erhält ein popovertarget-Attribut, dessen Wert auf die id des Popovers verweist und ein popovertargetaction-Attribut, dessen Wert hide es zum Schließen-Button macht.

Beachten Sie: Ein Popover ist kein modaler Dialog. Dafür wird das dialog-Element benötigt, das entweder mit JavaScript oder mit den command-Attributen gesteuert werden muss.

Siehe auch

• Infobox/Tooltips mit Popover

Weblinks

• WHATWG: the popovertarget attributes
• MDN: popovertarget Attribute

Liste der HTML-Attribute

• Universalattribute
  • accesskey
  • contenteditable
  • class
  • closedby
  • command
  • commandfor
  • data-*
  • dir
  • draggable
  • enterkeyhint
  • hidden
  • id
  • inputmode
  • itemprop
  • lang
  • nonce
  • on*
  • part
  • popover
  • popovertarget
  • popovertargetaction
  • role
  • slot
  • spellcheck
  • style
  • tabindex
  • title
  • translate
• Aria-Attribute
• Formular-Attribute
• Listen-Attribute
• Medien-Attribute
• Meta-Attribute
• Tabellen-Attribute
• Verweis-Attribute
• obsolet oder gelöscht