Gepubliceerd: 26 februari 2025
Chrome 133 bouwt voort op de bestaande popover-functie door een nieuwe modus te introduceren: popover="hint" . Deze door de browser beheerde modus maakt een nieuwe stapelcontext mogelijk die het maken van tooltips en soortgelijke kortstondige zwevende elementen vereenvoudigt. Het vermindert de inspanningen van ontwikkelaars terwijl de ontwerpflexibiliteit behouden blijft.
Inleiding en geschiedenis
Met de Popover API, geïntroduceerd in Chrome 114 , kunt u een toegankelijke zwevende gebruikersinterface maken, zoals menu's en tooltips. Standaard verzorgt popover="auto" de light-dismiss-functionaliteit en het focusbeheer voor u, zonder dat er extra scripting nodig is, zoals beschreven in Introductie van de Popover API . Bij het openen van een popover="auto" popover worden alle andere niet-voorouder-popovers met popover="auto" gesloten, wat zorgt voor een ergonomische API die het meest verstandige doet.
Popovers sluiten andere popovers
<div id="p1" popover>First Popover</div>
<button popovertarget="p1">Open popover 1</button>
<div id="p2" popover>Second Popover</div>
<button popovertarget="p2">Open popover 2</button>
In dit voorbeeld zal het openen van popover 2 popover 1 sluiten, aangezien popover="auto" slechts toestaat dat zo'n popover tegelijk geopend is.
Hoewel dit gedrag goed werkt voor menu's en dialoogvensters, kan het problemen veroorzaken wanneer meerdere typen zwevende gebruikersinterfaces naast elkaar moeten bestaan. Een menu en een tooltip die beide popover="auto" gebruiken, kunnen bijvoorbeeld botsen, waarbij het openen van de tooltip het menu sluit. Dit lijkt misschien een ongewone situatie, maar het komt veel voor in een moderne gebruikersinterface in applicatiestijl. De menu's in de header van github.com gebruiken bijvoorbeeld popovers voor zowel de menu's als de tooltips, waardoor beide onder bepaalde omstandigheden tegelijkertijd zichtbaar zijn:
Eén manier om dit op te lossen is door popover="manual" te gebruiken voor de tooltip-elementen, waardoor volledige controle over de popover mogelijk is met scripting. Dit vereist echter een herimplementatie van het stapelgedrag, light-dismissal en focusmanagement – precies de taken waarvoor de Popover API is ontworpen. Dit was voor ons aanleiding om manieren te onderzoeken om de API uit te breiden om deze ontbrekende functionaliteit te bieden.
Via ontwikkelaarsonderzoek hebben we twee veelvoorkomende stapelcontexten geïdentificeerd:
- Persistente gebruikersinterface : bijvoorbeeld menu's en dialoogvensters.
- Kortstondige gebruikersinterface : bijvoorbeeld hovercards en tooltips.
Om aan beide tegemoet te komen introduceert popover="hint" een tweede stapel, verschillend van popover="auto" , die ervoor zorgt dat menu's open blijven, zelfs als tooltips verschijnen. In plaats van het introduceren van meerdere stapelcontexten voor verschillende UI-typen – wat in wezen z-index opnieuw zou uitvinden – houdt deze aanpak de zaken eenvoudiger door slechts twee brede categorieën te definiëren: persistente UI ( auto ) en kortstondige UI ( hint ). Dit zorgt voor een evenwicht tussen flexibiliteit en het vermijden van het opnieuw opduiken van dezelfde problemen waarmee u te maken kreeg voordat u popover gebruikte.
Gedrag van de nieuwe waarde
Zowel popover="auto" als popover="hint" ondersteunen light distract , wat betekent dat ze automatisch sluiten wanneer de gebruiker erbuiten klikt of op Esc op het toetsenbord drukt. In dit opzicht zijn beide stijlen identiek.
Als het gaat om het geforceerd verbergen van andere popovers, sluit popover="auto" alle andere auto en hint popovers wanneer deze worden geopend, waardoor wordt verzekerd dat slechts één zo'n popover tegelijk actief is (de enige uitzondering hier zijn geneste popovers, die hieronder worden uitgelegd). popover="hint" daarentegen verbergt alleen andere hint popovers geforceerd, waardoor menu's en tooltips open kunnen blijven en naast elkaar kunnen bestaan.
Waar ze het meest van verschillen, is hun nestgedrag. popover="auto" ondersteunt nesten, waardoor een onderliggende popover open kan blijven binnen een andere bovenliggende popover. popover="hint" heeft een speciaal nestgedrag, waarbij de afzonderlijke "stacks" een rol spelen. Wanneer een hint popover zich in een auto popover bevindt, voegt deze zich bij de auto stapel om de contextuele groepering te behouden, wat betekent dat deze open blijft totdat andere auto of hint popovers ervoor zorgen dat deze geforceerd wordt verborgen. Dit zorgt voor intuïtief gedrag, waarbij tooltips andere menu's of popovers niet onderbreken.
Ten slotte is er voor heel verschillende gebruiksscenario's altijd popover="manual" , waarin geen van deze gedragingen zijn ingebakken, waardoor u de precieze functionaliteit en het gedrag kunt definiëren die u nodig hebt.
popover="auto" | popover="hint" | popover="manual" | |
|---|---|---|---|
| Licht afwijzen | Ja | Ja | Nee |
| Force-huiden: | Niet-gerelateerde auto 's en hint | Niet-gerelateerde hint | Niets |
| Nesten: | Ja | Speciaal (eerder beschreven) | N.v.t. – geen licht ontslag |
Zweeftriggering
Een veelgebruikt UX-patroon is dat tooltips en hovercards door hover worden geactiveerd . Als u de muis gedurende een bepaalde periode over een interessant element beweegt, wordt de hovercard weergegeven. Momenteel moet dat gedrag worden geïmplementeerd via JavaScript, bijvoorbeeld door luisteraars toe te voegen voor de mouseenter en mouseleave -gebeurtenissen. Er is echter nog een andere API in ontwikkeling die hovertriggering declaratief moet maken: de Interest Invokers API .
Deze API is nog steeds een work in progress, maar het algemene idee is om aan veel elementtypen een attribuut met de naam interesttarget toe te voegen, dat hover-triggering-gedrag aan hen verleent:
<a interesttarget="my-hovercard" href="...">
Hover to show the hovercard
</a>
<span popover="hint" id="my-hovercard">
This is the hovercard
</span>
Met de voorgaande HTML zal het bewegen van de <a> -link automatisch de my-hovercard popover weergeven. Als u de aanwijzer van dat element verwijdert, wordt de popover verborgen. Allemaal zonder JavaScript!
Voorbeelden
<button>An interesting button</button>
<div popover="hint">More info about the button</div>
[popover] {
margin: 0;
inset: auto;
position-area: bottom right;
}
const button = document.querySelector('button');
const popover = document.querySelector('[popover]');
button.onmouseenter = () => {
setTimeout(() => {
popover.showPopover({source: button});
}, 500);
}
button.onmouseleave = () => {
setTimeout(() => {
popover.hidePopover();
}, 500);
}
In dit voorbeeld wordt popover="hint" gebruikt om een basistooltip samen te stellen, die meer informatie geeft over de knop wanneer er met de muis over de knop wordt bewogen. De hover-activering wordt verzorgd door gebeurtenishandlers voor mouseenter en mouseleave met eenvoudige vertragingen van 0,5 seconde. Houd er rekening mee dat er een aantal details zijn die in dit voorbeeld niet worden afgehandeld:
- Het zweven over de popover zelf verhindert niet dat het wegzweven van een activerend element de popover sluit. Het is dus niet mogelijk om bijvoorbeeld tekst uit de popover te kopiëren of te plakken.
- Er is geen sprake van "debouncing": een kleine fractie van een seconde op de knop zweven is voldoende om de popover te activeren, zelfs als de knop snel wordt uitgeschakeld voordat de vertragingstijd is verstreken. In dit geval "flikkert" de tooltip snel open en dicht.
- Het voorbeeld is helemaal niet toegankelijk: elke gebruiker die geen muis gebruikt, heeft geen toegang tot de tooltip-inhoud.
Deze tekortkomingen kunnen worden verholpen met extra JavaScript. focus (of misschien keydown en keyup) gebeurtenishandlers zouden bijvoorbeeld moeten worden toegevoegd om toetsenbordgebaseerde activering van de popover te ondersteunen. Voor een uitleg van de dingen die correct moeten worden afgehandeld om ervoor te zorgen dat de tooltip toegankelijk is, zie deze geweldige blogpost van Sarah Higley. Al deze problemen (en meer) worden automatisch declaratief afgehandeld door de Interest Invokers API .
Meer informatie
Zie de functie-uitleg of de HTML-specificatie voor meer details.