Tool tip

[Stakset]

Vi har et behov for en tooltip komponent i PM. Den løser litt av den vanskelig balansen mellom det enkle og minimalistiske + informasjonsbehov og vanskelig termer innen forsikring.

Under en brukertest, hvor vi egentlig testet noe annet, kommenterte flere testere at de synes en tool tip på forsikringsbegreper var nyttig.

Jeg vil tro at flere løsninger har behov for en slik komponent.

Litt løse tanker om komponenten:

• Komponenten skal aldri brukes til informasjon som er nødvendig for å fullføre en handling.
• Skal ikke brukes i stedet for hjelpetekst, men som et tillegg ved behov.
• Må være klikkbar/valgbar. Ikke bare pekerfølsom.

Tanker eller innspill:)?

Legger ved noen skisser og link til Figma.
https://www.figma.com/file/VoZ1tf59wAifHmjD0juUN7/VD-forum?node-id=2470%3A148178

[wkillerud]

Kult @Stakset, dette tenker jeg flere vil ha nytte av (og husker det ble godt mottatt på tidligere forum 😄). Et par spørsmål:

• Er tanken at fargen på tooltip skal stå i kontrast til hovedtemaet? Altså mørk bakgrunn i lyst tema, og lys bakgrunn i mørkt tema?
  • Hvis ikke, skal vi ha flere fargevarianter?
• Er (?)-ikonet en del av tooltip-komponenten, eller skal en "tekstboble" kunne åpnes fra andre steder?

[Stakset]

Tanken er at den skal stå i kontrast ja. Så i light mode er granitt en relativt trygg farge mtp. andre bruksområder til den fargen. Dark mode er litt mer utfordrende. Tenker fargen fjellgrå kunne vært en løsning, uten at jeg har full oversikt over hvordan mørkt tema benyttes i dag.

Har ikke tenkt at komponenten/tekstboblen skal åpnes fra andre steder enn selve ikonet.

[daa1]

Jeg tenker jeg kan begynne å se på en implementasjon av tooltip. Hvordan stiller man seg til å bygge på toppen av et eksisterende bibliotek som er reskinnet kontra å bygge alt fra bunn av? https://popper.js.org/ er et bibliotek som er har eksistert i årevis, i tillegg har det vel ingen eksterne dependencies og er ganske lite av natur. Så min initielle plan var å bugge på toppen av dette for å få til en robust og tried and tested posisjonering av tooltipen. Hva tenker du @wkillerud ?

[wkillerud]

Usikker på hvor godt popper.js lar seg integrere med React, men er åpen for å basere komponenten på noe "tried and true". Kan f. eks. https://react-spectrum.adobe.com/react-aria/useTooltipTrigger.html være et alternativ å utforske? @daa1

[daa1]

Har ingen formening om det må være popper, finnes forøvrig en offisiell react-popper, https://popper.js.org/react-popper/v2/ .

Kan titte på litt alternativer, men da vet jeg hvertfall at man ikke prinsippielt unngår å bygge seg på toppen av av noe annet.

[wkillerud]

Tok en titt på Cloudscape Design System i dag, hvor de blant annet har denne varianten for å løse dette problemer: https://cloudscape.design/examples/react/onboarding.html

Trykk på Info-knappen ved ett av skjemafeltene og se at du får opp et sidepanel som gir en forklarende tekst. Sidepanelet legger seg ikke over innholdet om du har en bred nok skjerm, så du kan beholde informasjonen synlig samtidig som du bruker skjemaet. På mobil tar infopanelet over hele skjermen.

Cc @Stakset