W skrócie: Popover API pozwala zrobić menu, dymek z podpowiedzią albo małe okno informacyjne bez budowania całego systemu w JavaScripcie. Przeglądarka sama obsługuje zamykanie kliknięciem poza elementem i klawiszem Escape, a starszym przeglądarkom można dać prosty fallback.
Popover API pozwala zrobić wysuwany dymek, małe menu albo okno z informacją bez biblioteki JS i bez ręcznego pilnowania kliknięcia poza elementem. Wystarczy kilka atrybutów HTML. To jedna z tych funkcji, które wyglądają niepozornie, a po wdrożeniu oszczędzają sporo kodu na stronie firmowej.
Popover API w praktyce: co robi za Ciebie przeglądarka?
Popover API przenosi element do tak zwanej górnej warstwy interfejsu i daje mu natywne zachowanie, którego wcześniej często pilnował JavaScript. Element z atrybutem popover może być otwierany przyciskiem z popovertarget. Przeglądarka obsługuje m.in. zamykanie klawiszem Escape, kliknięcie poza popoverem i poprawne ułożenie nad resztą strony.
To nie jest zamiennik pełnego modala do każdej sytuacji. To raczej lekki mechanizm do krótkich treści: informacji o wycenie, filtrów, menu użytkownika, podpowiedzi przy formularzu albo listy opcji w panelu klienta. Oficjalny opis znajdziesz w dokumentacji MDN: Popover API.
Minimalny przykład bez JavaScriptu
Najmniejszy działający przykład składa się z przycisku i elementu z atrybutem popover. Poniżej jest wersja, którą możesz wkleić nawet do bloku „Własny HTML” w WordPressie.
<button type='button' popovertarget='wycena-popover'>
Co obejmuje bezpłatna wycena?
</button>
<div id='wycena-popover' popover>
<h2>Bezpłatna wycena strony</h2>
<p>Opisz firmę, cel strony i najważniejsze podstrony. Wrócimy z konkretną propozycją.</p>
<a href='/kontakt/'>Przejdź do formularza kontaktowego</a>
<button type='button' popovertarget='wycena-popover' popovertargetaction='hide'>
Zamknij
</button>
</div>W tym przykładzie pierwszy przycisk otwiera popover, a przycisk w środku go zamyka. Co ważne, użytkownik nie jest uwięziony w interfejsie. Może kliknąć poza okienkiem albo nacisnąć Escape. Dla małych elementów pomocniczych to duża różnica względem przypadkowo sklejonych skryptów z internetu.
Gdzie użyć tego na stronie firmowej?
Na stronie firmowej popover najlepiej działa tam, gdzie chcesz dopowiedzieć szczegół bez rozbijania rytmu czytania. Przykład: przy cenniku możesz dodać krótkie „Co obejmuje wycena?”, przy formularzu kontaktowym „Jakie informacje przyspieszą odpowiedź?”, a przy usłudze „Co dostarczamy po zakończeniu projektu?”.
W PEWIT lubimy takie rozwiązania, bo są lekkie i pomagają utrzymać porządek w projekcie. Jeśli budujesz stronę dla lokalnej firmy ze Świebodzina, Zielonej Góry czy Gdyni, nie zawsze potrzebujesz ciężkiego panelu z animacjami. Czasem wystarczy dobrze opisany przycisk i małe okno z konkretem. Więcej o prostym, zaufanym układzie strony pisaliśmy w tekście o tym, jak strona firmowa budzi zaufanie.
Popover dobrze wspiera też UX, bo nie odciąga użytkownika na osobną podstronę przy każdej drobnej informacji. Trzeba tylko pilnować, żeby nie chować w nim treści krytycznych: regulaminu, warunków zakupu, jedynego przycisku zamówienia albo ważnych danych kontaktowych. O wpływie takich decyzji na zachowanie użytkownika przeczytasz w naszym wpisie co to jest UX i dlaczego wpływa na sprzedaż.
Wsparcie przeglądarek i bezpieczny fallback
Wsparcie Popover API jest obecnie szerokie w głównych przeglądarkach, ale przy stronach firmowych warto myśleć o starszych wersjach. Aktualny status możesz sprawdzić w zestawieniach Baseline na web.dev. Najprostsza zasada: popover traktuj jako ulepszenie, a nie jedyną drogę do ważnej treści.
Praktyczny fallback jest prosty: wewnątrz popovera dodaj normalny link do pełnej podstrony lub formularza. Jeśli starsza przeglądarka nie obsłuży otwierania, użytkownik nadal ma widoczną alternatywę w treści strony albo obok przycisku. Możesz też dodać krótki CSS, który ukryje nieobsługiwany popover w przeglądarkach rozumiejących zapytanie @supports.
[popover] {
max-width: min(32rem, calc(100% - 2rem));
padding: 1rem;
border: 1px solid #ddd;
border-radius: .75rem;
box-shadow: 0 1rem 3rem rgb(0 0 0 / .18);
}
[popover]::backdrop {
background: rgb(0 0 0 / .25);
}
@supports not selector(:popover-open) {
[popover] {
display: none;
}
}Jeśli chcesz mieć takie drobne, szybkie i dostępne rozwiązania na swojej stronie, zobacz naszą ofertę tworzenia stron, sklepów i opieki WordPress. Przy małych elementach interfejsu często wygrywa nie efektowność, tylko prostota, przewidywalność i brak zbędnego kodu.