Mostra un tooltip quando passi il mouse sopra

Funzionalità web: Interest invokers Popover popover="hint" Posizionamento degli ancoraggi

Gli utenti si aspettano di vedere informazioni correlate aggiuntive senza cambiare completamente il contesto. Mostrare un tooltip quando un utente è interessato a maggiori informazioni può essere utile per fornire definizioni di un termine, chiarire l'azione che verrà eseguita da un pulsante di sola icona o fornire indicazioni aggiuntive sui campi del modulo.

Creazione del tooltip

Puoi creare un popover con il comportamento richiesto aggiungendo l'attributo popover="hint" a un elemento <div> o a un altro elemento semanticamente appropriato. Quando l'utente apre il tooltip, gli altri tooltip popover="hint" vengono nascosti, ma non i tooltip auto o manual. Gestisce anche la chiusura dei tooltip nidificati.

Inoltre, fornisce un comportamento di chiusura semplice, per cui quando un utente fa clic o sposta lo stato attivo all'esterno del popover, questo viene chiuso.

L'elemento tooltip deve avere un attributo id con un valore univoco:

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

Un utente esprime interesse per le informazioni aggiuntive passando il mouse o selezionando un elemento <a> o <button>. L'elemento deve avere un attributo interestfor che corrisponda all'attributo id del 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>

L'attivatore deve avere un indicatore visivo per segnalare che sono disponibili ulteriori informazioni interagendo con l'attivatore.

Accessibilità integrata in interestfor

Quando utilizzi interestfor, il browser gestisce il collegamento delle tecnologie per la disabilità per te:

  • Semantica implicita: un target con popover="hint" ottiene un ruolo minimo implicito di tooltip. NON impostare role="tooltip" autonomamente.
  • Associazione implicita. Il browser associa implicitamente l'elemento di origine alla destinazione tramite aria-describedby quando la destinazione è in testo normale o tramite aria-details quando la destinazione contiene contenuti interattivi. NON aggiungere aria-describedby o aria-details all'attivatore.
  • Contenuti interattivi: poiché l'associazione passa a aria-details quando necessario, il target PUÒ contenere contenuti interattivi (ad es. un link all'interno di una "scheda di interesse").

Vincoli di accessibilità (WCAG 1.4.13)

Anche se interestfor gestisce la semantica di cui sopra, la tua implementazione DEVE comunque soddisfare le WCAG 1.4.13 (Contenuti con Hover o Focus):

  • Ignorabile: gli utenti devono poter ignorare il tooltip senza spostare il puntatore o la selezione della tastiera (ad esempio, premendo il tasto Escape). L'attributo nativo popover gestisce automaticamente questa associazione.
  • Passaggio del mouse: il puntatore deve essere in grado di spostarsi sui contenuti del tooltip senza che questo scompaia. In questo modo, gli utenti con strumenti di ingrandimento possono leggere il testo del tooltip in sicurezza.
  • Persistenza: il tooltip deve rimanere visibile finché non viene rimosso l'attivatore di passaggio del mouse o di stato attivo, l'utente non lo chiude esplicitamente o i suoi contenuti non sono più validi.

Posizionamento della descrizione comando

Il tooltip è posizionato utilizzando il posizionamento degli ancoraggi CSS. Quando il tooltip viene aperto utilizzando interestfor, l'elemento di attivazione diventa automaticamente un ancoraggio implicito per il popover.

Nei browser moderni che supportano il posizionamento degli ancoraggi nativi, non è necessario definire un anchor-name sull'attivatore o un position-anchor sul tooltip. Puoi posizionare il tooltip direttamente in relazione al suo ancoraggio implicito utilizzando position-area e gestire l'inversione della collisione con 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 di riserva

Opzioni di riserva e supporto del browser per gli attivatori di interesse

Gli attivatori di interesse devono essere sottoposti a polyfill condizionale utilizzando il pacchetto di polyfill interestfor di NPM. Preferisci l'aggregazione del polyfill all'utilizzo della CDN.

OBBLIGATORIO: esegui il rilevamento delle funzionalità controllando la proprietà interestForElement su HTMLButtonElement.prototype e carica il polyfill solo quando manca il supporto nativo.

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

Avvertenze sui polyfill CSS

Quando utilizzi il polyfill, l'API CSS cambia leggermente per tenere conto della mancanza di supporto nativo per pseudo-classi e proprietà:

  • Pseudo-classi: il polyfill non può definire pseudo-classi :interest-source e :interest-target reali, quindi applica le classi .interest-source e .interest-target. OBBLIGATORIO: combinali con :is() per supportare sia gli stati nativi che quelli con polyfill.
/* Styles to apply when the effect is being previewed */
:is(:interest-source, .interest-source) { /* ... */ }
:is(:interest-target, .interest-target) { /* ... */ }
  • Proprietà CSS: per interest-delay, interest-delay-start e interest-delay-end, il polyfill richiede l'utilizzo di variabili CSS, in quanto non può leggere le proprietà personalizzate direttamente in tutti i browser.
/* 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);
}

Alternative e supporto del browser per Popover

L'API Popover è per lo più un potenziamento progressivo, ma i suoi comportamenti distintivi (promozione al livello superiore, chiusura con un clic e attivazione di popovertarget) non hanno un equivalente solo CSS. I browser meno recenti richiedono un polyfill o un fallback manuale se preferisci non fornirne uno.

Polyfill: per supportare l'attributo popover nei browser meno recenti, carica @oddbird/popover-polyfill in modo condizionale. OBBLIGATORIO: esegui il rilevamento delle funzionalità controllando la proprietà popover su HTMLElement.prototype e carica il polyfill solo quando manca il supporto nativo; NON caricarlo incondizionatamente.

Con un bundler o una mappa di importazione:

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

Senza un bundler, importa da una CDN all'interno di un <script type="module">:

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

Avvertenza sullo stile: il polyfill non può definire la pseudo-classe :popover-open reale, quindi applica una classe .\:popover-open. OBBLIGATORIO: combina i due elementi con :is() o :where(), altrimenti i browser che non dispongono di :popover-open ignorano l'intera regola:

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

In alternativa, per un fallback legacy senza un polyfill, utilizza position: fixed e calcola manualmente le coordinate tramite getBoundingClientRect() o affidati al posizionamento predefinito con inset: auto se è accettabile per il caso d'uso.

popover-polyfill non esegue il polyfill del comportamento dei suggerimenti nei browser che supportano popover, ma non popover="hint". Per questi browser, un tooltip aperto tramite lo stato attivo potrebbe rimanere aperto quando viene aperto un secondo tooltip tramite il passaggio del mouse.

Per supportare i browser senza posizionamento di ancoraggio, puoi utilizzare il polyfill @oddbird/css-anchor-positioning. In alternativa, puoi utilizzare @supports per specificare una posizione di riserva.

Quando utilizzi il polyfill @oddbird/css-anchor-positioning per il supporto dei browser legacy, tieni presente che il polyfill non supporta gli ancoraggi impliciti o position-area sui popover. Imposta esplicitamente un anchor-name sull'attivatore, imposta position-anchor sul popover e posiziona utilizzando le funzioni di inset anchor() anziché 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;
}