Tooltip

En tooltip är en ruta med information som visas när man hovrar med musen över en komponent.

Design och språk

  • Fundera alltid över om en tooltip är nödvändig, det vill säga använd inte tooltips i onödan.
  • Texten i en tooltip ska vara kort.
  • Är texten viktig för läsaren så lägg istället texten direkt på sidan, alternativt använd en informationsruta.

Tillgänglighet

För att göra en tooltip tillgänglig behöver du tänka på att

  • texten i en tooltip inte syns när man navigerar med tangentbordet. För att den ska göra det måste du själv lägga in den möjligheten i koden.
  • texten i en tooltip inte läses upp av skärmläsare. För att texten ska läsas upp måste du lägga in texten som aria-label.
  • inte låta den hovrade ytan vara för liten eftersom det kan vara svårt att fokusera en muspekare på en liten yta.

Alternativa komponenter

  • Informationsruta. Denna komponent är under utveckling.

Komponent och kod

Styleguiden har ingen komponent för tooltip. Du får istället använda den inbyggda tooltippen i respektive webbläsare.

Senast publicerad 2020-10-13

Sidansvarig för sidan är Styleguide