Popover API
Tworzenie podpowiedzi i okien dialogowych za pomocą natywnego atrybutu popover
Popover API to bezpłatna lekcja HTML Academy na CoddyKit. To lekcja 2 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej HTML Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs HTML Academy zawiera 4 lekcji w sumie.
Jak działa Popover API
Popover API zapewnia natywny sposób tworzenia popoverów, dialogów, tooltipów i menu w HTML-u — bez ręcznego używania JavaScriptu do pozycjonowania, obsługi fokusu, zamykania po kliknięciu poza elementem ani zamykania klawiszem Escape. Wbudowane zachowanie odpowiada oczekiwaniom użytkowników.
Atrybut popover
Dodaj atrybut popover do dowolnego elementu, aby uczynić go popoverem. Domyślnie jest on ukryty. Przycisk wyzwalający z atrybutem popovertarget="popover-id" wyświetla go po kliknięciu. Przeglądarka automatycznie obsługuje stan otwarcia i zamknięcia.
<button popovertarget="info">Show details</button>
<div id="info" popover>
<p>Here is some popover content.</p>
</div>Tryby popovera
popover="auto" (domyślny) — zamyka się po kliknięciu poza elementem lub naciśnięciu klawisza Escape; jednocześnie może być otwarty tylko jeden popover w trybie auto. popover="manual" — nie zamyka się automatycznie; trzeba go jawnie zamknąć za pomocą JavaScriptu lub innego wyzwalacza.
Przyciski wyzwalające
Atrybut popovertarget łączy przycisk z popoverem za pomocą jego identyfikatora. Przeglądarka obsługuje zachowanie przełącznika: kliknięcie przycisku wyświetla popover, a ponowne kliknięcie lub kliknięcie poza nim go zamyka. Do podstawowego użycia nie są potrzebne handlery zdarzeń.
Renderowanie w top layer
Popovery są renderowane w top layer — nad całą pozostałą zawartością, niezależnie od wartości z-indexu i kontekstu stosu. Eliminuje to klasyczny błąd „modal ukryty za elementem nadrzędnym z overflow:hidden”, który często występuje w ręcznie tworzonych popoverach.
Programowe wyświetlanie i ukrywanie
JavaScript może wyświetlać i ukrywać popovery za pomocą metod: element.showPopover(), element.hidePopover(), element.togglePopover(). Obowiązują te same zasady co w przypadku deklaratywnego wyzwalacza — zamykanie po kliknięciu poza elementem nadal działa w trybie auto.
Zdarzenie toggle
Popovery wywołują zdarzenie toggle, gdy zmienia się ich stan. Właściwość newState zdarzenia przyjmuje wartość "open" lub "closed". Jest to przydatne w analityce, zarządzaniu fokusem lub koordynowaniu innych elementów interfejsu ze stanem otwarcia popovera.
popoverEl.addEventListener("toggle", (e) => {
console.log("Popover is now", e.newState);
});Pseudoklasa CSS
Pseudoklasa :popover-open pasuje do popoverów znajdujących się w stanie otwarcia. Na tej podstawie można ustawiać przejścia, przezroczystość i transformacje CSS: [popover]:popover-open { opacity: 1; transform: none; }.
Pozycjonowanie względem kotwicy
W połączeniu z CSS Anchor Positioning API popovery mogą być automatycznie pozycjonowane względem wyzwalającego je elementu — bez JavaScriptu można więc zrealizować klasyczny wzorzec „tooltipu obok przycisku”. Obie funkcje należą do tego samego nowoczesnego kierunku rozwoju prymitywów interfejsu.
Dostępność
Przeglądarka obsługuje przechwytywanie fokusu w modalnych popoverach, przy zamknięciu przywraca fokus wyzwalającemu je elementowi i informuje czytniki ekranu o stanie otwarcia popovera. Ręczne zbudowanie tego mechanizmu wymaga dużej ilości kodu ARIA; Popover API zapewnia go bez dodatkowej pracy.
Obsługa przeglądarek
Chrome i Safari obsługują Popover API, a Firefox dodał tę obsługę niedawno. Dla szerszej zgodności dostępny jest niewielki polyfill. W nowych projektach można korzystać z natywnej obsługi i stosować progressive enhancement dla starszych przeglądarek.
Zastępowanie starszych wzorców
Wiele bibliotek modalnych JavaScriptu (sweetalert, react-modal) istnieje głównie po to, aby obchodzić ograniczenia, które Popover API usuwa natywnie. Warto zaplanować migrację: mniejsze bundlowane pliki, lepsze ustawienia domyślne i mniej kodu do utrzymania. Popover API jest jednym z największych usprawnień HTML-u od lat.
Sprawdzenie wiedzy
Co robi popover="auto", czego nie robi popover="manual"?
Podsumowanie
Popover API dodaje atrybut popover oraz metody JavaScript showPopover/hidePopover/togglePopover, łączenie wyzwalaczy za pomocą popovertarget, renderowanie w top layer nad wszystkimi kontekstami stosu, pseudoklasę :popover-open i zdarzenia toggle. Tryb auto umożliwia zamykanie po kliknięciu poza elementem, a tryb manual wymaga jawnego zamknięcia. Zastępuje większość własnych bibliotek modalów i tooltipów jednym prymitywem HTML-u, który poprawnie obsługuje dostępność, fokus i z-index.
Często zadawane pytania
Czy lekcja „Popover API” jest bezpłatna?
Tak — pełny tekst „Popover API” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu HTML Academy, przejdź na CoddyKit PRO. Kurs HTML Academy zawiera 4 lekcji w sumie.
Co nauczysz się w „Popover API”?
Tworzenie podpowiedzi i okien dialogowych za pomocą natywnego atrybutu popover Ćwiczysz HTML Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.
Czy potrzebuję doświadczenia, aby zacząć HTML Academy?
Nie wymagamy żadnego doświadczenia. HTML Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 2 z 4.
Ile czasu zajmuje lekcja „Popover API”?
Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.
Czy mogę pisać i uruchamiać kod w tej lekcji HTML Academy?
Tak. Każda lekcja HTML Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.