Użytkownicy oczekują, że zobaczą dodatkowe powiązane informacje bez całkowitej zmiany kontekstu. Wyświetlanie etykietki, gdy użytkownik chce uzyskać więcej informacji, może być przydatne do podawania definicji terminu, wyjaśniania działania przycisku zawierającego tylko ikonę lub udostępniania dodatkowych wskazówek dotyczących pola formularza.
Tworzenie etykietki
Możesz utworzyć wyskakujące okienko o wymaganym działaniu, dodając atrybut popover="hint" do elementu <div> lub innego elementu odpowiedniego pod względem semantycznym. Gdy użytkownik otworzy etykietkę, ukryje ona inne etykietki popover="hint", ale nie ukryje etykietek auto ani manual. Obsługuje też zamykanie zagnieżdżonych etykietek.
Zapewnia też możliwość łatwego zamknięcia – gdy użytkownik kliknie lub w inny sposób przeniesie zaznaczenie poza wyskakujące okienko, zostanie ono zamknięte.
Element etykietki musi mieć atrybut id z unikalną wartością:
<!-- MANDATORY: The tooltip container `<div>` must have a `popover` attribute.
the value of `"hint"` ensures it can be "light dismissed". -->
<div popover="hint" id="tooltip">Tooltip content</div>
Użytkownik wyraża zainteresowanie dodatkowymi informacjami, najeżdżając kursorem na element <a> lub <button> albo go zaznaczając. Element musi mieć atrybut interestfor, który pasuje do atrybutu id etykietki.
<!-- The `interestfor` attribute can be applied to a `<button>` element: -->
<button interestfor="tooltip">Tooltip trigger</button>
<!-- The `interestfor` attribute can also be applied to an `<a>` element: -->
<a interestfor="tooltip" href="">Tooltip trigger</a>
Element aktywujący musi mieć wskaźnik wizualny, który informuje, że po wejściu w interakcję z tym elementem dostępne są dodatkowe informacje.
Ułatwienia dostępu wbudowane w usługę interestfor
Gdy używasz elementu interestfor, przeglądarka obsługuje połączenie z technologią wspomagającą osoby z niepełnosprawnością:
- Semantyka niejawna: element docelowy z atrybutem
popover="hint"uzyskuje niejawną minimalną rolętooltip. NIE ustawiaj samodzielnie parametrurole="tooltip". - Powiązanie domyślne: przeglądarka domyślnie kojarzy element źródłowy z elementem docelowym za pomocą
aria-describedby, gdy element docelowy jest zwykłym tekstem, lub za pomocąaria-details, gdy element docelowy zawiera treści interaktywne. NIE dodawaj do regułyaria-describedbyaniaria-details. - Treści interaktywne: ponieważ powiązanie przełącza się na
aria-details, gdy jest to konieczne, element docelowy MOŻE zawierać treści interaktywne (np. link w „karcie zainteresowań”).
Ograniczenia dotyczące ułatwień dostępu (WCAG 1.4.13)
Nawet jeśli interestfor obsługuje powyższe semantyki, Twoja implementacja MUSI spełniać wymagania WCAG 1.4.13 (treść po najechaniu kursorem lub po ustawieniu fokusu):
- Możliwość zamknięcia: użytkownicy muszą mieć możliwość zamknięcia etykietki bez konieczności przesuwania kursora lub przenoszenia zaznaczenia klawiatury (np. przez naciśnięcie klawisza
Escape). Atrybut natywnypopoverautomatycznie zarządza tym powiązaniem. - Możliwość najechania kursorem: kursor musi mieć możliwość najechania na treść etykietki bez jej znikania. Dzięki temu użytkownicy korzystający z narzędzi powiększających mogą bezpiecznie odczytać tekst etykietki.
- Trwałość: etykietka musi być widoczna, dopóki nie zostanie usunięty wyzwalacz najechania kursorem lub zaznaczenia, użytkownik wyraźnie jej nie zamknie lub jej treść nie będzie już aktualna.
Pozycjonowanie etykietki
Etykietka jest pozycjonowana za pomocą pozycjonowania kotwicy CSS. Gdy etykietka jest otwierana za pomocą interestfor, element aktywujący automatycznie staje się niejawną kotwicą wyskakującego okienka.
W nowoczesnych przeglądarkach obsługujących natywne pozycjonowanie kotwic nie trzeba definiować atrybutu anchor-name w elemencie aktywującym ani atrybutu position-anchor w etykietce. Możesz umieścić etykietkę bezpośrednio względem jej domniemanego zakotwiczenia, używając position-area, i obsłużyć odwracanie kolizji za pomocą position-try-fallbacks:
[popover] {
/* Implicit anchor from interestfor: no anchor-name or position-anchor needed */
position-area: top;
position-try-fallbacks: flip-block;
margin: unset;
}
Strategie zastępcze
Zastępcze i obsługiwane przez przeglądarki wywołania zainteresowań
Elementy wywołujące zainteresowanie muszą być warunkowo wypełniane za pomocą pakietu polyfill interestfor z NPM. Zamiast korzystać z CDN, lepiej dołączyć polyfill do pakietu.
OBOWIĄZKOWO: wykryj funkcję, sprawdzając właściwość interestForElement w HTMLButtonElement.prototype, i wczytaj polyfill tylko wtedy, gdy brakuje obsługi natywnej.
<script type="module">
if (!HTMLButtonElement.prototype.hasOwnProperty("interestForElement")) {
// CDN link only used for example, prefer bundling.
await import("https://unpkg.com/interestfor@latest");
}
</script>
Zastrzeżenia dotyczące kodu polyfill CSS
W przypadku korzystania z kodu polyfill interfejs CSS API zmienia się nieznacznie, aby uwzględnić brak obsługi natywnej pseudoklasy i właściwości:
- Pseudoklasy: polyfill nie może definiować rzeczywistych pseudoklas
:interest-sourcei:interest-target, więc zamiast nich stosuje klasy.interest-sourcei.interest-target. OBOWIĄZKOWO: połącz je z:is(), aby obsługiwać zarówno stany natywne, jak i stany polyfill.
/* Styles to apply when the effect is being previewed */
:is(:interest-source, .interest-source) { /* ... */ }
:is(:interest-target, .interest-target) { /* ... */ }
- Właściwości CSS: w przypadku
interest-delay,interest-delay-startiinterest-delay-endpolyfill wymaga użycia zmiennych CSS, ponieważ nie może odczytać właściwości niestandardowych bezpośrednio we wszystkich przeglądarkach.
/* Adjust the start and end delay for interest invokers */
[interestfor] {
--interest-delay-start: 0.2s;
interest-delay-start: var(--interest-delay-start);
--interest-delay-end: 0.1s;
interest-delay-end: var(--interest-delay-end);
}
Kreacje zastępcze i obsługa wyskakujących okienek w przeglądarkach
Interfejs Popover API to głównie progresywne ulepszanie, ale jego definiujące zachowania – promowanie warstwy górnej, lekkie odrzucanie i wywoływanie popovertarget – nie mają odpowiednika tylko w CSS. Starsze przeglądarki wymagają polyfilla lub ręcznego rozwiązania zastępczego, jeśli nie chcesz go dostarczać.
Polyfill: aby obsługiwać atrybut popover w starszych przeglądarkach, warunkowo wczytuj @oddbird/popover-polyfill. OBOWIĄZKOWO: wykryj funkcję, sprawdzając właściwość popover w HTMLElement.prototype, i wczytaj polyfill tylko wtedy, gdy brakuje obsługi natywnej – NIE wczytuj go bezwarunkowo.
Za pomocą bundlera lub mapy importu:
// MANDATORY: Feature detect 'popover' on HTMLElement.prototype.
if (!("popover" in HTMLElement.prototype)) {
import("@oddbird/popover-polyfill");
}
Bez bundlera, importuj z sieci CDN w tagu <script type="module">:
<script type="module">
if (!("popover" in HTMLElement.prototype)) {
import("https://unpkg.com/@oddbird/popover-polyfill@latest/dist/popover.min.js");
}
</script>
Uwaga dotycząca stylów: polyfill nie może zdefiniować prawdziwej pseudoklasy :popover-open, więc zamiast tego stosuje klasę .\:popover-open. OBOWIĄZKOWO: połącz te 2 właściwości za pomocą :is() lub :where(), w przeciwnym razie przeglądarki, które nie obsługują :popover-open, odrzucą całą regułę:
[popover]:is(:popover-open, .\:popover-open) {
display: block;
}
Możesz też użyć position: fixed i ręcznie obliczyć współrzędne za pomocą getBoundingClientRect() lub polegać na domyślnym pozycjonowaniu za pomocą inset: auto, jeśli jest to akceptowalne w danym przypadku użycia.
popover-polyfill nie zapewnia kodu polyfill dla hintingu w przeglądarkach, które obsługują popover, ale nie popover="hint". W tych przeglądarkach etykietka otwarta przez zaznaczenie może pozostać otwarta, gdy zostanie otwarta druga etykietka przez najechanie kursorem.
Aby zapewnić obsługę przeglądarek bez pozycjonowania zakotwiczonego, możesz użyć kodu polyfill @oddbird/css-anchor-positioning. Możesz też użyć @supports, aby określić pozycję zastępczą.
Jeśli używasz kodu polyfill @oddbird/css-anchor-positioning do obsługi starszych przeglądarek, pamiętaj, że nie obsługuje on niejawnych kotwic ani position-area w przypadku wyskakujących okienek. Ustaw jawnie anchor-name w elemencie aktywującym, ustaw position-anchor w elemencie popover i ustal pozycję za pomocą funkcji wstawiania anchor() zamiast position-area:
<!-- MANDATORY: Conditionally install the anchor positioning polyfill -->
<script type="module">
if (!("anchorName" in document.documentElement.style)) {
await import("https://unpkg.com/@oddbird/css-anchor-positioning");
}
</script>
button[interestfor="tooltip-attrs"] {
/* MANDATORY: Each trigger and popover pair must have a unique anchor name, referenced by `anchor-name` on the trigger and `position-anchor` on the popover. */
anchor-name: --tooltip-attrs;
}
#tooltip-attrs {
position-anchor: --tooltip-attrs;
/* If using the anchor positioning polyfill with a popover, DO use `anchor()` functions, and not `position-area. */
top: anchor(bottom);
left: anchor(right);
margin: unset;
}