nve-tooltip

Et verktøyhint gir kontekstuell informasjon om et element når elementet får fokus eller brukeren holder pekeren over det, men er ellers ikke synlig på siden. Verktøytipset vises automatisk – brukeren ber ikke om å få det vist. Verktøytips støttes på nve-button, button- og a-elementer, og bør brukes for innhold med korte etiketter, for eksempel ikonknapper. Kan ha ulik farge og metning.

Arvet fra LitElement

Feil / oppgaver / PR

Ingen som vi vet om. Hvis du finner noe muffens, registrer en feil under Issues i Github og merk den med nve-tooltip.

 

<nve-tooltip content="Dette er tooltip">
  <nve-button>Hover Me</nve-button>
</nve-tooltip>

Pakk inn en nve-button, button eller a i nve-tooltip. Tooltipen forankres til elementet inni og vises automatisk over eller under det, avhengig av tilgjengelig plass.

nve-tooltip støtter foreløpig kun disse elementene. Dette er et bevisst valg for å begrense bruken til elementer der tooltip er hensiktsmessig og tilgjengelig.

nve-tooltip skal kun omslutte ett interaktivt element. Den skal ikke brukes rundt flere søskenelementer. Hvis flere elementer trenger en tooltip, skal hvert element ha sin egen nve-tooltip.

Når pekeren flyttes bort fra elementet, lukkes tooltipen med en kort forsinkelse. Dette gjør det mulig å flytte pekeren over tooltipen uten at den forsvinner umiddelbart.

Forsinkelsen er et bevisst valg for å gi en mer stabil og brukervennlig opplevelse.

Tooltip er ikke blant de mest tilgjengelige komponentene og bør brukes med omtanke. Les mer om anbefalt bruk og begrensninger i seksjonen om Tilgjengelighet.

Tooltip eller toggletip?

Tooltip og toggletip brukes begge til å vise supplerende informasjon, men har ulike funksjoner og ulik tilknytning til innholdet.

Beskriver informasjonen ett bestemt interaktivt element?

Bruk nve-tooltip.

Tooltip er direkte knyttet til elementet det beskriver. Det samme elementet fungerer som utløser, og innholdet vises når elementet får fokus eller brukeren holder pekeren over det.

Dette passer for eksempel når du vil:

• forklare hva en knapp eller lenke gjør
• gi en kort presisering av en handling

<nve-tooltip content="Klikk for å sende skjema">
  <nve-button>Send</nve-button>
</nve-tooltip>

<nve-tooltip content="Åpner en ekstern side">
  <a href="#" target="_blank">Gå til</a>
</nve-tooltip>

Beskriver informasjonen et område, en funksjon eller annet innhold i grensesnittet?

Bruk nve-toggletip.

Toggletip har sin egen utløser og er ikke direkte knyttet til elementene den beskriver. Plasser utløseren i nærheten av innholdet den beskriver. Dette passer for eksempel når du vil:

• forklare et filter eller en gruppe med valg
• gi mer informasjon om en del av grensesnittet
• forklare et begrep eller en funksjon ved hjelp av en egen informasjonsknapp

Toggletip åpnes når brukeren aktiverer utløseren og kan derfor også brukes på enheter uten hover.

Se eksempel under på hvordan nve-toggletip kan brukes i et skjema for å gi mer informasjon om et inputfelt.

<nve-input label="Beskriv saken">
  <nve-toggletip slot="label-toggletip" aria-label="Les mer om saken">
    <span>Gi en kort beskrivelse som oppsummerer innholdet og gir nødvendig kontekst.</span>
  </nve-toggletip>
</nve-input>

Retningslinjer

• Bruk tooltip med måte. Tooltip skal gi nyttig tilleggsinformasjon, ikke være den eneste måten brukeren får tilgang til viktig informasjon. Ikke legg kritisk informasjon i en tooltip.
• Knytt tooltipen til elementet den beskriver. Tooltip skal være forankret til kontrollen eller lenken den hører til.
• Bruk kun på interaktive elementer som får fokus. Tooltip skal bare brukes på elementer brukeren kan samhandle med, som knapper og lenker.
• Ikke bruk tooltip som erstatning for etiketter. Interaktive elementer skal ha en tydelig og tilgjengelig etikett. Tooltip kan supplere etiketten, men ikke erstatte den.
• Bruk kun ren tekst. Hold den kort og presis.

På enheter uten hover blir tooltip ikke vist visuelt. Likevel blir teksten knyttet til elementets tilgjengelighetsbeskrivelse og kan leses opp av skjermlesere. Hvis informasjonen må være tilgjengelig for alle brukere, bør du bruke en nve-toggletip i stedet.

Eksempler

Innhold

Bruk content for å vise tekst i tooltipen.

Tooltip skal ikke inneholde HTML, bilder, ikoner, emojier eller annet rikt innhold.

<nve-tooltip content="Tooltip er kun tekst">
  <nve-button>Hover Me</nve-button>
</nve-tooltip>

Plassering

nve-tooltip bruker CSS Anchor Positioning API. Tooltipen vises som standard over elementet den er knyttet til, men flyttes automatisk under eller til sidene dersom det ikke er nok plass. Hvis nettleseren ikke støtter anchor positioning, brukes en innebygd fallback for å plassere tooltipen manuelt. Derfor trengs ingen egen egenskap for å styre plasseringen.

Avstand

Du kan justere avstanden mellom tooltipen og elementet den er forankret til ved å overstyre CSS-variabelen --offset på nve-tooltip. Standardverdien er 8px.

<nve-tooltip style="--offset: 40px" content="Stor avstand">
  <nve-button>Hover Me</nve-button>
</nve-tooltip>

Ulike varianter og metningsgrader

Du kan bruke variant for å sette farger:

• neutral som er standard
• info
• success
• warning
• error

Bruk saturation for å sette metningsgrad:

• default
• emphasized som er standard
• subtle

<div></div>
<div>Default</div>
<div>Emphasized</div>
<div>Subtle</div>

<div>Neutral</div>
<nve-tooltip content="neutral, default" saturation="default">
  <nve-button>Hover Me</nve-button>
</nve-tooltip>
<nve-tooltip content="neutral, emphasized">
  <nve-button>Hover Me</nve-button>
</nve-tooltip>
<nve-tooltip content="neutral, subtle" saturation="subtle">
  <nve-button>Hover Me</nve-button>
</nve-tooltip>

<div>Info</div>
<nve-tooltip content="info, default" variant="info" saturation="default">
  <nve-button>Hover Me</nve-button>
</nve-tooltip>
<nve-tooltip content="info, emphasized" variant="info">
  <nve-button>Hover Me</nve-button>
</nve-tooltip>
<nve-tooltip content="info, subtle" variant="info" saturation="subtle">
  <nve-button>Hover Me</nve-button>
</nve-tooltip>

<div>Success</div>
<nve-tooltip content="success, default" variant="success" saturation="default">
  <nve-button>Hover Me</nve-button>
</nve-tooltip>
<nve-tooltip content="success, emphasized" variant="success">
  <nve-button>Hover Me</nve-button>
</nve-tooltip>
<nve-tooltip content="success, subtle" variant="success" saturation="subtle">
  <nve-button>Hover Me</nve-button>
</nve-tooltip>

<div>Warning</div>
<nve-tooltip content="warning, default" variant="warning" saturation="default">
  <nve-button>Hover Me</nve-button>
</nve-tooltip>
<nve-tooltip content="warning, emphasized" variant="warning">
  <nve-button>Hover Me</nve-button>
</nve-tooltip>
<nve-tooltip content="warning, subtle" variant="warning" saturation="subtle">
  <nve-button>Hover Me</nve-button>
</nve-tooltip>

<div>Error</div>
<nve-tooltip content="error, default" variant="error" saturation="default">
  <nve-button>Hover Me</nve-button>
</nve-tooltip>
<nve-tooltip content="error, emphasized" variant="error">
  <nve-button>Hover Me</nve-button>
</nve-tooltip>
<nve-tooltip content="error, subtle" variant="error" saturation="subtle">
  <nve-button>Hover Me</nve-button>
</nve-tooltip>

Tilgjengelighet

Hvis informasjonen er viktig nok til å vises i en tooltip, er den ikke da viktig nok til å alltid være synlig?

Dette er et godt spørsmål å stille før du tar nve-tooltip i bruk.

Hvis informasjonen er viktig nok til at alle brukere bør se den, bør den som regel være synlig direkte i grensesnittet.

Hvis det er plass, bør det brukes tydelige etiketter og korte, synlige beskrivelser fremfor å skjule informasjon i nve-tooltip. Bruk tooltip kun for kort, supplerende informasjon.

nve-tooltip er en popover som bruker ARIA-rollen tooltip og følger anbefalt oppførsel for tooltip.

Skjermlesere

For å gjøre innholdet tilgjengelig for skjermlesere legger nve-tooltip automatisk til en tilgjengelig etikett på elementet den omslutter:

• Hvis elementet ikke har synlig tekst, brukes innholdet i tooltipen som aria-label.
• Hvis elementet allerede har synlig tekst, legges innholdet i tooltipen til i aria-label, slik at skjermleseren leser både den synlige teksten og den supplerende forklaringen.

Tastatur og peker

Tooltipen vises automatisk når brukeren holder pekeren over elementet eller fokuserer elementet med tastaturet.

Tooltipen lukkes når pekeren flyttes bort fra både elementet og tooltipen, elementet mister fokus eller når brukeren trykker Escape

Tooltipen mottar aldri fokus. Tastaturfokus forblir alltid på elementet som utløste tooltipen.

Vedvarende innhold ved hover

Tooltipen skal forbli synlig når pekeren beveger seg over den, selv om det innebærer at pekeren ikke lenger er over elementet som utløste den. Innhold som vises ved hover kan være vanskelig eller umulig å oppfatte dersom brukeren må holde pekeren over utløseren hele tiden.

Dette følger suksesskriterium WCAG 2.1 – 1.4.13 Content on Hover or Focus, som krever at innhold som vises ved hover eller fokus skal være vedvarende og ikke forsvinne uten at brukeren selv avslutter interaksjonen.

Egenskaper

Navn	Type	Arvet fra	Beskrivelse	Reflected
content	= ''		Tekstlig innholdet i tooltipen
variant	'neutral' | 'success' | 'info' | 'warning' | 'error' = 'neutral'		Variant, bestemmer fargen på tag
saturation	'emphasized' | 'subtle' | 'default' = 'emphasized'		Saturation - Hvor mettet fargen på tooltip er

Deler

Navn	Beskrivelse
tooltip	- Selve tooltipen
content	- Innholdet i tooltipen
trigger	- Elementet som trigger tooltipen