nve-toggletip

Et toggletip viser utfyllende informasjon i et popover som åpnes når brukeren aktiverer en ikonknapp med mus eller tastatur. I motsetning til et verktøytips åpnes ikke toggletipen automatisk ved hover eller fokus, og innholdet beskriver ikke elementet som åpner popoveret. Innholdet leveres gjennom standardsporet og kan bestå av tekst, lenker eller andre komponenter. Ikon, farge og metning kan tilpasses.

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-toggletip.

 

<nve-toggletip aria-label="Vis mer info">
  <span>Ekstra info i toggletip.</span>
</nve-toggletip>

nve-toggletip er basert på Popover API med automatisk lukkeatferd. Den lukkes automatisk når brukeren klikker utenfor eller trykker Esc.

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

• Ikke legg kritisk informasjon i toggletipen. Informasjon som er nødvendig for å forstå eller fullføre en oppgave skal være synlig i grensesnittet.
• Plasser toggletipen nær informasjonen den utdyper. Brukeren skal enkelt forstå hvilken del av grensesnittet den utfyllende informasjonen gjelder.
• Bruk tooltipen når innholdet beskriver kontrollen. Dersom innholdet kun forklarer funksjonen til knappen eller lenken, bør du bruke nve-tooltip i stedet.
• Hold innholdet kort og relevant. Selv om toggletipen kan inneholde rikere innhold, bør den være enkel å lese og fokusere på én oppgave eller ett tema.

Eksempler

Innhold

Innholdet i toggletipen leveres gjennom standardsporet. Legg inn ønsket innhold som barn av nve-toggletip. Innholdet kan bestå av tekst, HTML eller andre komponenter.

<nve-toggletip aria-label="Vis mer informasjon">
  <span>Innholdet kan bestå av HTML.</span>
</nve-toggletip>

Plassering

nve-toggletip bruker CSS Anchor Positioning API. Toggletipen vises som standard over knappen som åpner den, 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 toggletipen manuelt. Derfor trengs ingen egen egenskap for å styre plasseringen.

Avstand

Du kan justere avstanden mellom toggletipen og ikonknappen som viser den ved å overstyre CSS-variabelen --offset på nve-toggletip. Standardverdien er 4px.

<nve-toggletip aria-label="Vis mer info" style="--offset:20px">
  <span>Ekstra info i toggletip.</span>
</nve-toggletip>

Ikon

Som standard brukes info-ikonet. Dersom det er behov for et annet ikon, bruk iconName.

Velg et ikon som tydelig signaliserer at komponenten åpner utfyllende informasjon. Unngå ikoner som kan gi inntrykk av en annen handling eller funksjon.

<nve-toggletip>
  <span>Dette er toggletip med standard ikon.</span>
</nve-toggletip>

<nve-toggletip iconName="info_i">
  <span>Dette er toggletip med et annet ikon.</span>
</nve-toggletip>

<nve-toggletip iconName="help">
  <span>Dette er toggletip med et annet ikon.</span>
</nve-toggletip>

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-toggletip saturation="default">
  <span>Ekstra info i toggletip.</span>
</nve-toggletip>
<nve-toggletip>
  <span>Ekstra info i toggletip.</span>
</nve-toggletip>
<nve-toggletip saturation="subtle">
  <span>Ekstra info i toggletip.</span>
</nve-toggletip>

<div>Info</div>
<nve-toggletip variant="info" saturation="default">
  <span>Ekstra info i toggletip.</span>
</nve-toggletip>
<nve-toggletip variant="info">
  <span>Ekstra info i toggletip.</span>
</nve-toggletip>
<nve-toggletip variant="info" saturation="subtle">
  <span>Ekstra info i toggletip.</span>
</nve-toggletip>

<div>Success</div>
<nve-toggletip variant="success" saturation="default">
  <span>Ekstra info i toggletip.</span>
</nve-toggletip>
<nve-toggletip variant="success">
  <span>Ekstra info i toggletip.</span>
</nve-toggletip>
<nve-toggletip variant="success" saturation="subtle">
  <span>Ekstra info i toggletip.</span>
</nve-toggletip>

<div>Warning</div>
<nve-toggletip variant="warning" saturation="default">
  <span>Ekstra info i toggletip.</span>
</nve-toggletip>
<nve-toggletip variant="warning">
  <span>Ekstra info i toggletip.</span>
</nve-toggletip>
<nve-toggletip variant="warning" saturation="subtle">
  <span>Ekstra info i toggletip.</span>
</nve-toggletip>

<div>Error</div>
<nve-toggletip variant="error" saturation="default">
  <span>Ekstra info i toggletip.</span>
</nve-toggletip>
<nve-toggletip variant="error">
  <span>Ekstra info i toggletip.</span>
</nve-toggletip>
<nve-toggletip variant="error" saturation="subtle">
  <span>Ekstra info i toggletip.</span>
</nve-toggletip>

Tilgjengelighet

Bruk kun nve-toggletip til utfyllende informasjon. Dersom informasjonen er nødvendig for å forstå innholdet eller fullføre en oppgave, bør den være synlig direkte i grensesnittet.

nve-toggletip bør gjøre det enklere å få mer informasjon, ikke være den eneste måten brukeren får tilgang til viktig innhold.

Unngå å plassere flere toggletips tett ved siden av hverandre. Dersom brukeren må åpne flere informasjonsknapper for å forstå samme innhold, bør informasjonen presenteres på en annen måte.

aria-label

Husk å sette aria-label på nve-toggletip. Komponenten gjengis som en knapp med et ikon og har derfor ingen synlig etikett. En beskrivende aria-label er nødvendig for at skjermleserbrukere skal forstå knappens funksjon.

<nve-toggletip aria-label="Vis mer informasjon">
  <span>Ekstra informasjon i toggletipen.</span>
</nve-toggletip>

Egenskaper

Navn	Type	Arvet fra	Beskrivelse	Reflected
testId	string | undefined = undefined
iconName	= 'info'		Ikon navn som skal vises på knappen
variant	'neutral' | 'success' | 'info' | 'warning' | 'error' = 'neutral'		Variant, bestemmer fargen på tag
saturation	'emphasized' | 'subtle' | 'default' = 'emphasized'		Saturation - Hvor mettet fargen på tooltip er

Metoder

Navn	Parametre	Returtype	Arvet fra	Beskrivelse
toggle

Deler

Navn	Beskrivelse
trigger	- Knappen som åpner toggletipen
content	- Selve popoveret med innholdet