(interpretuje: Firefox 125, Opera 100, Chrome 114)

• Wersja podstawowa z przyciskiem zaawansowanym:

  <element id="identyfikator" popover>
  	...
  	<button type="button" popovertarget="identyfikator" popovertargetaction="hide">Zamknij</button>
  </element>
  <button type="button" popovertarget="identyfikator">Otwórz/Zamknij</button>

• Wersja rozszerzona z przyciskiem zaawansowanym:

  <element id="identyfikator" popover="tryb">...</element>
  <button type="button" popovertarget="identyfikator" popovertargetaction="akcja">...</button>

• Wersja podstawowa z przyciskiem prostym:

  <element id="identyfikator" popover>
  	...
  	<input type="button" value="Zamknij" popovertarget="identyfikator" popovertargetaction="hide">
  </element>
  <input type="button" value="Otwórz/Zamknij" popovertarget="identyfikator" popovertargetaction="akcja">

• Wersja rozszerzona z przyciskiem prostym:

  <element id="identyfikator" popover="tryb">...</element>
  <input type="button" value="..." popovertarget="identyfikator" popovertargetaction="akcja">

Popover to element w postaci domyślnie ukrytego okna dialogowego, które po otworzeniu wyświetla się bezpośrednio w obrębie strony ponad jej standardową zawartością. W rzeczywistości popover jest integralnym elementem strony, a nie osobnym elementem interfejsu przeglądarki. W związku z tym nie wyskakuje on poza obręb karty przeglądarki, jak to ma miejsce w przypadku okien pop-up i pop-under.

Aby stworzyć okienko popover, należy wykonać następujące kroki:

1. Najpierw do elementu, który ma stać się popoverem, przypisujemy atrybut id="..." oraz popover, który może być zarówno atrybutem logicznym (wstawianym bez wartości) albo mieć przypisaną określoną wartość.
2. Następnie, kiedy już mamy wstawiony na stronie sam popover, możemy zająć się dodaniem przycisków sterujących jego otwieraniem i ewentualnie zamykaniem. W tym celu do elementu BUTTON lub INPUT (z atrybutem type="button") przypisujemy atrybut popovertarget="..." o wartości takiej samej, jak identyfikator id="..." popovera.
3. Na koniec do przycisku możemy opcjonalnie dodać atrybut popovertargetaction="..." określający akcję, która po kliknięciu w przycisk ma zostać wykonana na popoverze. Warto zwrócić uwagę, że tym samym popoverem może sterować wiele przycisków - np. jeden może go otwierać, a drugi zamykać.

Przykład <div popover, button "button" popovertarget popovertargetaction>

<div id="popover1" popover>
	<p>To jest popover, który powinien się wyświetlić ponad standardową zawartością strony.</p>
	<p>Aby go zamknąć, kliknij jeszcze raz przycisk, wciśnij klawisz Escape albo kliknij gdziekolwiek na stronie poza tym okienkiem.</p>
</div>
<button type="button" popovertarget="popover1">Otwórz/zamknij popover</button>

Bardziej zaawansowany przykład z osobnym przyciskiem zamykania i blokadą przypadkowego zamknięcia:

<div id="popover2" popover="manual">
	<p>To jest popover, który powinien się wyświetlić ponad standardową zawartością strony.</p>
	<p>Aby go zamknąć, kliknij przycisk:</p>
	<button type="button" popovertarget="popover2" popovertargetaction="hide">Zamknij popover</button>
</div>
<button type="button" popovertarget="popover2" popovertargetaction="show">Otwórz popover</button>