HTML popover-attribut

Definition och användning

popover Attributet definierar elementet som ett popup-element, vilket innebär att när elementet anropas kommer det att placeras över innehållet och inte störa andra HTML-elementens positioner.

Popup-elementet kommer att vara osynligt innan det anropas av ett annat element. Det andra elementet måste ha ett popovertarget-attribut med ett värde som refererar till popup-elementets id.

Popup-elementet kommer att placeras över all annan innehåll, genom att klicka på popovertarget-elementet kan popup-elementet växlas mellan att vara synligt och osynligt:

Hej

En popup-element kan vara en enda HTML-element, som i föregående exempel, eller en hel uppsättning HTML-element, som i följande exempel.

Se också:

HTML Referenshandbok:HTML Input popovertarget-attributet

HTML Referenshandbok:HTML Input popovertargetaction-attributet

Exempel

Exempel 1

Lägg till ett element med popover-attributet <h1> samt en knapp för att visa/dölja det:

<h1 popover id="myheader">Hej</h1>
<button popovertarget="myheader">Klicka mig!</button>

Prova själv

Exempel 2

Använd en div-element som ett popup-element:

<div popover id="mydiv">
  <h2>Popover</h2>
  <hr>
  <p>En popup-fönster är ett element som placeras över alla andra element.</p>
  <p>Använd detta när du vill informera om något viktigt.</p>
</div>

Prova själv

Syntax

<element popover>

Egenskapsvärde

popover Egenskapen är en boolean egenskap. Om den är satt, specificerar den att elementet är ett popup-fönster-element.

Webbläsarstöd

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
114 114 Stödjer inte 17 100