Component: HelpText/Tooltip

[Magnusrm]

Describe the component

In Altinn3 we need a help-text button to display additional information about the field the user is about to fill in. In order to use this together with labels/legends we should create this button as a component in the DesignSystem and export it.

It should then be implemented into the FieldSet component in order to be able to place the component inside a fieldset next to the label/legend.

Example from app-frontend-react, not actual finished design:

Figma

Link to correct placement in our Figma component library.

• [ ] Design is fully specified in Figma
  • [ ] Design component with all relevant states (And think )
  • [ ] Do a WCAG test of the sketches
  • [ ] Functionality/animation is described and prototyped if relevant

Tokens

• [ ] Tokens are published and ready for use
  • [ ] The size is described with tokens
  • [ ] spacing is described with tokens
  • [ ] The color of all states are described with tokens
  • [ ] Border width or styling is described with tokens
  • [ ] Text size are described with tokens

Replace with size tokens

Replace with padding

Replace with colors

Replace with border width

Replace with text

Guidelines

Not necessarry for development to start

• [ ] Guidelines are ready
  • [ ] Write/update guidelines
  • [ ] Do's and don'ts
  • [ ] Examples

SVG

• [ ] If there are used any svgs in this component is it available for the developer?

[Magnusrm]

This component has been developed and added to the new DIGDIR design system: https://github.com/digdir/designsystem