Een tooltip tonen als je de cursor op een element plaatst

Webfuncties: Interesse-invokers Popover popover="hint" Ankerpositionering

Gebruikers verwachten aanvullende gerelateerde informatie te zien zonder de context volledig te wijzigen. Een tooltip tonen als een gebruiker geïnteresseerd is in meer informatie, kan nuttig zijn om definities voor een term te geven, de actie te verduidelijken die een knop met alleen een icoon uitvoert of aanvullende richtlijnen voor formuliervelden te geven.

De tooltip maken

Je kunt een popover met het vereiste gedrag maken door het kenmerk popover="hint" toe te voegen aan een <div> of een ander semantisch geschikt element. Als de gebruiker de tooltip opent, worden andere popover="hint"-tooltips verborgen, maar niet de auto- of manual-tooltips. De functie verwerkt ook het sluiten van geneste tooltips.

Het biedt ook een lichte sluitfunctie, zodat de popover wordt gesloten als een gebruiker buiten de popover klikt of de focus ergens anders op richt.

Het tooltip-element moet een id-kenmerk met een unieke waarde hebben:

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

Een gebruiker toont interesse in de aanvullende informatie door de cursor of focus op een <a>- of <button>-element te plaatsen. Het element moet een interestfor-kenmerk hebben dat overeenkomt met het id-kenmerk van de tooltip.

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

De trigger moet een visuele indicator hebben om aan te geven dat er aanvullende informatie beschikbaar is door interactie met de trigger.

Ingebouwde toegankelijkheid in interestfor

Als je interestfor gebruikt, verwerkt de browser de bedrading van de ondersteunende technologie voor je:

  • Impliciete semantiek: Een doel met popover="hint" krijgt een impliciete minimumrol van tooltip. Stel role="tooltip" NIET zelf in.
  • Impliciete koppeling: De browser koppelt het bronelement impliciet aan het doel via aria-describedby als het doel platte tekst is of via aria-details als het doel interactieve content bevat. Voeg aria-describedby of aria-details NIET toe aan de trigger.
  • Interactieve content: Omdat de koppeling indien nodig overschakelt naar aria-details, mag het doel interactieve content bevatten (bijvoorbeeld een link in een interessekaart).

Toegankelijkheidsbeperkingen (WCAG 1.4.13)

Zelfs als interestfor de semantiek hierboven afhandelt, MOET je implementatie nog steeds voldoen aan WCAG 1.4.13 (Content on Hover or Focus):

  • Sluitbaar: Gebruikers moeten de tooltip kunnen sluiten zonder de muisaanwijzer of toetsenbordfocus te verplaatsen (bijvoorbeeld door op de Escape-toets te drukken). Het native kenmerk popover beheert deze binding automatisch.
  • Aanwijsbaar: De aanwijzer moet over de tooltipcontent zelf kunnen bewegen zonder dat de tooltip verdwijnt. Zo kunnen gebruikers met vergrotingshulpmiddelen de tooltiptekst veilig lezen.
  • Blijvend: De tooltip moet zichtbaar blijven totdat de cursor of focus wordt verwijderd, de gebruiker de tooltip expliciet sluit of de content niet meer geldig is.

De tooltip positioneren

De tooltip wordt gepositioneerd met CSS-ankerpositionering. Als de tooltip wordt geopend met interestfor, wordt het triggerelement automatisch een impliciet anker voor de popover.

In moderne browsers die systeemeigen ankerpositionering ondersteunen, hoef je geen anchor-name te definiëren voor de trigger of een position-anchor voor de tooltip. Je kunt de tooltip rechtstreeks ten opzichte van het impliciete anker plaatsen met position-area en botsingen afhandelen met 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;
}

Reservestrategieën

Fallbacks en browserondersteuning voor aanroepers van interesses

Interesse-invokers moeten voorwaardelijk worden gepolyfilled met het interestfor-polyfillpakket van NPM. Bundel de polyfill liever dan het CDN te gebruiken.

VERPLICHT: Voer een functiedetectie uit door te controleren op de property interestForElement op HTMLButtonElement.prototype en laad de polyfill alleen als native ondersteuning ontbreekt.

<script type="module">
  if (!HTMLButtonElement.prototype.hasOwnProperty("interestForElement")) {
    // CDN link only used for example, prefer bundling.
    await import("https://unpkg.com/interestfor@latest");
  }
</script>

Voorbehouden voor CSS-polyfill

Als je de polyfill gebruikt, verandert de CSS API enigszins om rekening te houden met het gebrek aan ondersteuning voor native pseudoklassen en eigenschappen:

  • Pseudoklassen: De polyfill kan geen echte :interest-source- en :interest-target-pseudoklassen definiëren, dus past in plaats daarvan .interest-source- en .interest-target-klassen toe. VERPLICHT: Combineer ze met :is() om zowel systeemeigen als polyfilled statussen te ondersteunen.
/* Styles to apply when the effect is being previewed */
:is(:interest-source, .interest-source) { /* ... */ }
:is(:interest-target, .interest-target) { /* ... */ }
  • CSS-eigenschappen: Voor interest-delay, interest-delay-start en interest-delay-end vereist de polyfill het gebruik van CSS-variabelen, omdat deze de aangepaste eigenschappen niet rechtstreeks in alle browsers kan lezen.
/* 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);
}

Fallbacks en browserondersteuning voor Popover

De Popover API is voornamelijk progressive enhancement, maar de bepalende gedragingen (promotie van de bovenste laag, licht sluiten en aanroepen van popovertarget) hebben geen equivalent dat alleen CSS gebruikt. Oudere browsers hebben een polyfill nodig, of een handmatige fallback als je er liever geen verzendt.

Polyfill: Als je het kenmerk popover wilt ondersteunen in oudere browsers, laad je @oddbird/popover-polyfill voorwaardelijk. VERPLICHT: Voer een functiedetectie uit door te controleren op de property popover op HTMLElement.prototype en laad de polyfill alleen als systeemeigen ondersteuning ontbreekt. Laad de polyfill NIET onvoorwaardelijk.

Met een bundler of importtoewijzing:

// MANDATORY: Feature detect 'popover' on HTMLElement.prototype.
if (!("popover" in HTMLElement.prototype)) {
  import("@oddbird/popover-polyfill");
}

Zonder bundler importeer je vanuit een CDN in een <script type="module">:

<script type="module">
  if (!("popover" in HTMLElement.prototype)) {
    import("https://unpkg.com/@oddbird/popover-polyfill@latest/dist/popover.min.js");
  }
</script>

Opmerking over de stijl: De polyfill kan de echte pseudoklasse :popover-open niet definiëren, dus wordt in plaats daarvan de klasse .\:popover-open toegepast. VERPLICHT: Combineer de 2 met :is() of :where(), anders negeren browsers zonder :popover-open de hele regel:

[popover]:is(:popover-open, .\:popover-open) {
  display: block;
}

Als alternatief kun je voor een verouderde fallback zonder polyfill position: fixed gebruiken en de coördinaten handmatig berekenen via getBoundingClientRect() of vertrouwen op de standaardpositionering met inset: auto als dat acceptabel is voor de use case.

De popover-polyfill vult het hintgedrag niet aan in browsers die popover ondersteunen, maar niet popover="hint". Voor die browsers kan een tooltip die via focus is geopend, open blijven als een tweede tooltip via de muisaanwijzer wordt geopend.

Als je browsers zonder ankerpositionering wilt ondersteunen, kun je de @oddbird/css-anchor-positioning-polyfill gebruiken. U kunt ook @supports gebruiken om een reservepositie aan te geven.

Als je de polyfill @oddbird/css-anchor-positioning gebruikt voor ondersteuning van oudere browsers, moet je weten dat de polyfill geen impliciete ankers of position-area op pop-overs ondersteunt. Stel expliciet een anchor-name in voor de trigger, stel position-anchor in voor de popover en positioneer met anchor()-insetfuncties in plaats van 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;
}