Okienko popover <... popover, button "button" popovertarget popovertargetaction command commandfor, input "button" popovertarget popovertargetaction> - HTML5

Jak w języku HTML otworzyć wyskakujące okienko na warstwie ponad zawartością strony bez użycia JavaScript?

Wariant podstawowy:

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

lub

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

lub

<element id="identyfikator" popover>...</element>
<button type="button" commandfor="identyfikator" command="toggle-popover">Otwórz/Zamknij</button>

Wariant z oddzielnym przyciskiem zamykania:

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

lub

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

lub

<element id="identyfikator" popover>
	...
	<button type="button" commandfor="identyfikator" command="hide-popover">Zamknij</button>
</element>
<button type="button" commandfor="identyfikator" command="komenda">Otwórz/Zamknij</button>

element

Dowolny znacznik HTML 4.01 lub HTML5

identyfikator

Dowolny unikalny tekst - tzn. taki, który nie może się powtórzyć w tym samym dokumencie w postaci drugiego atrybutu id="..."

Otwórz

Zamknij

Można wstawić własne napisy, które zostaną wyświetlone na przyciskach otwierających lub/i zamykających okienko popover

akcja

Może przyjąć postać:

toggle - naprzemienne otwieranie i zamykanie popovera (domyślnie)
show - otwieranie popovera
hide - zamykanie popovera

komenda

Może przyjąć postać:

toggle-popover - naprzemienne otwieranie i zamykanie popovera
show-popover - otwieranie popovera
hide-popover - zamykanie popovera

Popover to element w postaci domyślnie ukrytego okienka, które po otworzeniu wyświetla się bezpośrednio w obrębie strony ponad jej standardową zawartością. Może posłużyć do tworzenia np. menu kontekstowych lub otwieranych informacji z podpowiedziami dla użytkownika.

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:

Najpierw do elementu, który ma stać się popoverem, przypisujemy atrybut id="..." oraz popover.
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.
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ć.

Okienko popover jest bardzo podobne do okna dialogowego. W rzeczywistości jednak istnieją ważne różnice [zobacz rozdział: Okno dialogowe]. Nie należy używać popovera, kiedy wymagamy od użytkownika podjęcia akcji w postaci wykonania jakiegoś zadania albo podania jakichś informacji. Popover nie ma też trybu modalnego.

Okienko popover domyślnie nie ma przypisanego żadnego bardziej skomplikowanego wyglądu poza czarną ramką i niewielkim marginesem wewnątrz. Aby to zmienić, użyj stylów CSS. Możesz również skorzystać ze specjalnego generatora zamieszczonego tutaj.

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:

<div id="popover2" popover>
	<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>

Tryb popovera <... popover="auto, manual, hint">

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

lub

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

lub

<element id="identyfikator" popover="tryb">...</element>
<button type="button" commandfor="identyfikator" command="komenda">...</button>

tryb

Określa, co się stanie w momencie otworzenia popovera oraz w jaki sposób można go zamknąć.

Atrybut popover="..."
Wartość	Otworzenie zamyka inne popovery	Zamykanie kliknięciem poza popoverem lub klawiszem `Esc`
`auto` (domyślnie)	Tak	Tak
`manual`	Nie	Nie (potrzebny przycisk zamykania)
`hint`	Tylko `popover="hint"`	Tak

element

identyfikator

Otwórz

Zamknij

akcja

komenda

Standardowe parametry popovera

Domyślnie w tym samym czasie na stronie może się wyświetlać tylko jeden popover w trybie auto. Próba otworzenia kolejnego automatycznie zamyka poprzedni.

Aby obejść to ograniczenie, możemy używać atrybutu popover="manual". Jednak okienka w tym trybie posiadają pewną cechę, która w określonych przypadkach może okazać się wadą: użytkownik nie może ich zamykać klawiszem Esc ani klikając gdziekolwiek poza ich obrębem.

Rozwiązaniem może być skorzystanie z atrybutu popover="hint", który zwykle służy do pokazywania informacji z krótkimi podpowiedziami dla użytkownika. Trzeba jednak pamiętać, że rozwiązanie to będzie dobrze współdziałać tylko z okienkami popover="manual", ponieważ kliknięcie gdziekolwiek poza obrębem popovera w trybie auto - np. w przycisk otwierający popover podpowiedzi - i tak spowoduje automatyczne zamknięcie tego pierwszego.

Pamiętaj, aby dodać oddzielny przycisk zamykania wewnątrz każdego okienka popover="manual". W przeciwnym razie użytkownik może nie być w stanie sam zamknąć takiego okienka.

Przykład <div popover="manual, hint">

<div id="popover3" popover="manual">
	<p>To jest popover="manual", który powinien się wyświetlić ponad standardową zawartością strony.</p>
	<p>Aby go zamknąć, kliknij przycisk:</p>
	<button type="button" popovertarget="popover3" popovertargetaction="hide">Zamknij popover</button>
</div>
<button type="button" popovertarget="popover3" popovertargetaction="show">Otwórz popover="manual"</button>
<div id="popover4" popover="hint">
	<p>To jest popover="hint". Aby go zamknąć, wciśnij Esc lub kliknij poza jego obrębem.</p>
</div>
<button type="button" popovertarget="popover4" popovertargetaction="show">Otwórz popover="hint"</button>

Pytania i odpowiedzi <div popover, button "button" popovertarget popovertargetaction, input "button" popovertarget popovertargetaction>

Co to jest "popover" w tworzeniu stron internetowych?

Popover w tworzeniu stron internetowych to interaktywny element, który pojawia się nad inną treścią po interakcji użytkownika (np. kliknięciu przycisku). Popover służy do wyświetlania dodatkowych informacji, formularzy lub opcji w małym okienku, bez opuszczania aktualnej strony.

Kiedy używać popover?

Popover jest używany, gdy chcesz pokazać dodatkową zawartość, która nie musi być widoczna przez cały czas, ale powinna być łatwo dostępna w odpowiednim momencie, np. podczas wypełniania formularza lub wyboru opcji. Można go zastosować do prezentowania wskazówek, formularzy lub złożonych opcji, które użytkownik może szybko zamknąć lub ukryć.

Jak zrobić popover w HTML?

Aby zrobić popover w HTML, użyj atrybutu popover na elemencie, który ma się pojawić jako popover, oraz atrybutów popovertarget i popovertargetaction na elementach wyzwalających. Przykładowy kod: <div id="identyfikator" popover>...</div> <button type="button" popovertarget="identyfikator">Otwórz/Zamknij</button>. Ten kod otwiera lub zamyka popover po kliknięciu przycisku.

Jak ustawić popover?

Domyślnie popover pojawia się nad zawartością strony, ale jego pozycję można dostosować za pomocą CSS. Używając właściwości CSS, takich jak position, top, left, bottom, right czy margin, możesz precyzyjnie określić, gdzie popover ma się pojawić względem elementu wyzwalającego. Na przykład jeśli znacznik z popoverem ma przypisany atrybut id="identyfikator", to w zewnętrznym arkuszu stylów możesz wstawić następujący kod: #identyfikator { position: fixed; top: auto; left: auto; bottom: 10px; right: 10px; margin: 0; }. Powinno to spowodować ustawienie popovera w prawym-dolnym rogu, 10 pikseli od krawędzi okna przeglądarki.

Jak ręcznie uruchomić popover?

Ręczne uruchomienie popovera w HTML jest możliwe poprzez ustawienie atrybutu popovertargetaction na show lub hide na odpowiednim elemencie wyzwalającym. Przykład: <input type="button" value="Pokaż" popovertarget="identyfikator" popovertargetaction="show"> otworzy popover, natomiast ustawienie hide zamknie go.

Czy popover powinien mieć przycisk zamykania?

Tak, popover powinien mieć przycisk zamykania, zwłaszcza gdy jego zawartość jest interaktywna lub może utrudniać korzystanie z innych elementów na stronie. Można to zrobić, dodając przycisk z atrybutem popovertargetaction="hide" w treści popovera. Przykład: <button type="button" popovertarget="identyfikator" popovertargetaction="hide">Zamknij</button>.

Przeglądarki

❌ Nie działa
	Chrome	Firefox	Edge	Opera	Safari
`<element popover>`	114 2023-05-30	125 2024-04-16	114 2023-06-02	100 2023-06-29	17 2023-09-18
`<element popover="hint">`	133 2025-02-04	149 2026-03-24	133 2025-02-06	118 2025-04-15	❌
`<button popovertarget>`	114 2023-05-30	125 2024-04-16	114 2023-06-02	100 2023-06-29	17 2023-09-18
`<button popovertargetaction>`	114 2023-05-30	125 2024-04-16	114 2023-06-02	100 2023-06-29	17 2023-09-18
`<input popovertarget>`	114 2023-05-30	125 2024-04-16	114 2023-06-02	100 2023-06-29	17 2023-09-18
`<input popovertargetaction>`	114 2023-05-30	125 2024-04-16	114 2023-06-02	100 2023-06-29	17 2023-09-18
`<button command>`	135 2025-04-01	144 2025-10-14	135 2025-04-04	120 2025-07-02	26.2 2025-12-12
`<button commandfor>`	135 2025-04-01	144 2025-10-14	135 2025-04-04	120 2025-07-02	26.2 2025-12-12

Komentarze

Zobacz więcej komentarzy