Un popover è un piccolo pannello che si apre accanto a un pulsante, per contenuti interattivi: filtri, un breve modulo, un selettore di colore. È un popover="auto" nativo, quindi il browser lo chiude con Esc o con un clic esterno, riporta il focus e lo mette subito dopo il suo trigger nell’ordine di tabulazione.

Una hovercard è un tooltip ricco. Si apre dopo un breve passaggio del mouse, o subito con il focus da tastiera, e descrive il suo trigger. Resta aperta mentre il puntatore ci si sposta sopra, così il testo si può leggere e selezionare.

Entrambi passano al lato opposto quando manca spazio, restano sullo schermo e seguono il loro trigger mentre la pagina scorre.

Filtri

Un popover con un modulo all’interno. arrow lo fa puntare verso il suo trigger, e hide() lo chiude da codice.

Showing open, in review issues.

Hovercard

Passa il mouse su un nome, o raggiungilo con Tab. La card descrive il link, quindi gli screen reader la leggono dopo il nome.

Reviewed by @ada and @grace.

Lati e animazioni di entrata

side e align stabiliscono dove si apre; start e end seguono la direzione del testo. enter e motion stabiliscono come entra in scena.