Popover = suggerimento

Keith Cirkel

Mason Freed

Data di pubblicazione: 26 febbraio 2025

Chrome 133 si basa sulla funzionalità popover esistente introducendo una nuova modalità: popover="hint". Questa modalità gestita dal browser attiva un nuovo contesto di impilamento che semplifica la creazione di descrizioni comando ed elementi fluttuanti temporanei simili. Riduce il lavoro degli sviluppatori mantenendo la flessibilità del design.

Introduzione e cronologia

L'API Popover, introdotta in Chrome 114, consente di creare UI popup accessibili come menu e descrizioni comando. Per impostazione predefinita, popover="auto" gestisce la funzionalità di chiusura rapida e la gestione dell'attenzione per conto tuo, senza la necessità di script aggiuntivi, come descritto in Introduzione all'API Popover. Quando si apre un popover popover="auto", tutti gli altri popover non principali con popover="auto" vengono chiusi, il che rende l'API ergonomica e consente di eseguire l'azione più sensata.

Popup che chiudono altri popup

<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 questo esempio, l'apertura del popover 2 chiuderà il popover 1, poiché popover="auto" consente di aprire un solo popover alla volta.

Sebbene questo comportamento funzioni bene per menu e finestre di dialogo, potrebbe creare problemi quando devono coesistere più tipi di UI mobili. Ad esempio, un menu e una descrizione comando che utilizzano entrambi popover="auto" potrebbero entrare in conflitto, in quanto l'apertura della descrizione comando chiude il menu. Questa potrebbe sembrare una situazione insolita, ma si verifica spesso in un'interfaccia utente moderna in stile applicazione. Ad esempio, i menu nell'intestazione di github.com utilizzano i popover sia per i menu sia per le descrizioni comando, consentendo di visualizzarli contemporaneamente a determinate condizioni:

Il menu GitHub.

Un modo per risolvere il problema è utilizzare popover="manual" per gli elementi della descrizione comando, che consente il controllo completo del popup con gli script. Tuttavia, questo richiede la reimplementazione del comportamento di accodamento, della chiusura rapida e della gestione dell'attenzione, ovvero esattamente le attività per le quali è stata progettata l'API Popover. Per questo motivo, abbiamo deciso di esplorare i modi per estendere l'API in modo da fornire questa funzionalità mancante.

Grazie alla ricerca condotta tra gli sviluppatori, abbiamo identificato due contesti di accatastamento comuni:

• Interfaccia utente persistente: ad esempio menu e finestre di dialogo.
• Interfaccia utente temporanea: ad esempio, schede popup e descrizioni comando.

Per supportare entrambi, popover="hint" introduce un secondo livello, distinto da popover="auto", che garantisce che i menu rimangano aperti anche quando vengono visualizzate le descrizioni comando. Anziché introdurre più contesti di impilamento per diversi tipi di interfaccia utente, il che equivalerebbe a reinventare z-index, questo approccio semplifica le cose definendo solo due ampie categorie: interfaccia utente persistente (auto) e interfaccia utente effimera (hint). In questo modo si trova un equilibrio tra flessibilità ed evita di riproporre gli stessi problemi riscontrati prima di utilizzare il popup.

Comportamento del nuovo valore

Sia popover="auto" che popover="hint" supportano la chiusura rapida, il che significa che si chiudono automaticamente quando l'utente fa clic all'esterno o preme Esc sulla tastiera. A questo proposito, entrambi gli stili sono identici.

Per quanto riguarda l'oscuramento forzato di altri popup, popover="auto" chiude tutti gli altri popup auto e hint quando viene aperto, assicurandosi che sia attivo un solo popup alla volta (l'unica eccezione sono i popup nidificati, illustrati di seguito). popover="hint", invece, nasconde forzatamente solo gli altri popuphint, consentendo a menu e descrizioni comando di rimanere aperti e coesistere.

La differenza maggiore sta nel comportamento di nidificazione. popover="auto" supporta il nidificazione, consentendo a un popup secondario di rimanere aperto all'interno di un altro popup principale. popover="hint" ha un comportamento di nidificazione speciale, che è dove entrano in gioco le "serie" separate. Quando un popup hint si trova all'interno di un popup auto, si unisce allo stack auto per mantenere il raggruppamento contestuale, il che significa che rimarrà aperto finché altri popup auto o hint non lo nascondono forzatamente. Questo offre un comportamento intuitivo, in cui le descrizioni comando non interrompono altri menu o popover.

Infine, per casi d'uso molto diversi, c'è sempre popover="manual", che non è dotato di nessuno di questi comportamenti predefiniti, consentendoti di definire la funzionalità e il comportamento esatti di cui hai bisogno.

	popover="auto"	popover="hint"	popover="manual"
Rifiutare luce	Sì	Sì	No
Occultamenti forzati:	auto e hint non correlati	hint non correlati	Nothing
Nesting:	Sì	Speciale (descritto in precedenza)	N/A: nessuna dismissione con la luce

Attivazione con il passaggio del mouse

Un pattern UX comune prevede che le descrizioni comando e le schede popup vengano attivate con il passaggio del mouse. Se passi il mouse sopra un elemento di interesse per un determinato periodo di tempo, viene visualizzata la scheda popup. Attualmente, questo comportamento deve essere implementato tramite JavaScript, ad esempio aggiungendo ascoltatori per gli eventi mouseenter e mouseleave. Tuttavia, è in fase di sviluppo un'altra API che dovrebbe rendere dichiarativo l'attivazione dell'hover: l'API Interest Invokers.

Questa API è ancora in fase di sviluppo, ma l'idea generale è aggiungere un attributo chiamato interesttarget a molti tipi di elementi, che conferisce loro un comportamento di attivazione tramite il passaggio del mouse:

<a interesttarget="my-hovercard" href="...">
  Hover to show the hovercard
</a>
<span popover="hint" id="my-hovercard">
  This is the hovercard
</span> 

Con il codice HTML precedente, se passi il mouse sopra il link <a> viene visualizzato automaticamente il popover my-hovercard. Se sposti il cursore dall'elemento, il popup verrà nascosto. Il tutto senza JavaScript.

Esempi

<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);
}

Prova questa funzionalità in tempo reale.

Questo esempio utilizza popover="hint" per creare una descrizione comando di base, che fornisce maggiori informazioni sul pulsante quando il mouse passa sopra il pulsante. L'attivazione con il passaggio del mouse viene fornita dai gestori degli eventi per mouseenter e mouseleave con semplici ritardi di 0,5 secondi. Tieni presente che alcuni dettagli non sono gestiti da questo esempio:

1. Il passaggio del mouse sopra il popover stesso non impedisce la chiusura del popover quando il mouse si allontana da un elemento di attivazione. Pertanto, non è possibile copiare o incollare il testo, ad esempio, dal popup.
2. Non è presente il "debouncing": è sufficiente passare il mouse sopra il pulsante per una piccola frazione di secondo per attivare il popup, anche se il mouse viene allontanato rapidamente dal pulsante prima che trascorra il tempo di ritardo. In questo caso, la descrizione comando "lampeggia" e si apre e si chiude rapidamente.
3. L'esempio non è affatto accessibile: qualsiasi utente che non utilizza un mouse non può accedere ai contenuti della descrizione comando.

Questi problemi possono essere risolti con JavaScript aggiuntivo. Ad esempio, focus (o forse keydown e keyup)) devono essere aggiunti i gestori eventi per supportare l'attivazione del popup tramite tastiera. Per una spiegazione di ciò che deve essere gestito correttamente per assicurarsi che la descrizione comando sia accessibile, consulta questo fantastico post del blog di Sarah Higley. Tutti questi problemi (e altri) verranno gestiti automaticamente in modo dichiarativo dall'API Interest Invokers.

Scopri di più

Per maggiori dettagli, consulta la spiegazione della funzionalità o la specifica HTML.