Popover design for popovers in in text

[eirikbacker]

Tooltips can be placed around raw text. This is how Mattilsynet is using Tooltip in most situations: we have so many complicated terms, or terms that can be interpreted in different ways, or used in different was across different countries, but we need to use them due to legal regulations. In these scenarios, we use tooltip like:

Please contact the <Tooltip content="…">freight forwarder</Tooltip>
for information about the <Tooltip content="…">export certificate</Tooltip>.

But there is no design for how this should look. Maybe we should have a standard if placed around text? dashed underline is a pretty wide spread convention :)

Tasks

Preview Give feedback

1. Add popover-link in Figma
2. Add popover-link in code

[mrosvik]

@eirikbacker

Should we use popover instead of tooltip for word definitions? 🤔

Example from vg:

I think we need a common understanding of when to use tooltip and when to use popovers.

[eirikbacker]

Good point, and maybe even consolidate or make a good distinction for the team? This might be easier to discuss live in a meeting?

[mrosvik]

Meeting Notes 29.11.24
Viveca, Lasse, Marianne, Eirik

We agreed to recommend using popovers for word explanations.

The reason is that tooltips appear on hover, have an inverted background, and should therefore not contain more than 4 words. Popovers, on the other hand, can include a paragraph of text and interactive elements such as buttons. For example, in a situation where we ask the user to confirm the deletion of a row in a table, the popover can include confirmation text along with a "Delete" button and a "Cancel" button.

To indicate that a word in an article has an associated popover, we will use a dashed underline for the word. This style will be created as a typography style called popover-link(?), which can be applied to a word. We must ensure that this is documented.

Tooltip Guidelines:

• Should explain that tooltips are used only for short and concise information, typically a few words to to clarify a symbol.

Popover Guidelines:

• Should explain that popovers are used for more extensive information (but maximum one paragraph) or when interaction is required (e.g., links, buttons, or choices).
• Should include guidance on using the popover-link typography style alongside popovers for word explanations.
• Suggest adding an example in Storybook demonstrating this use case.

HelpText Documentation:

• Should be updated to reflect that if a word needs to be explained, the recommended approach is to use popover-link + popover.

@Febakke @eirikbacker @Viveca24 Feel free to add anything if I've missed or misunderstood something.

[mrosvik]

Name: popover.triggertext ?

[Barsnes]

Meeting 2024.12.16 @mrosvik @Barsnes @mimarz @Viveca24
We have decided to go with a class as a first step.
Will be put directly on our trigger (button)

[Febakke]

Figma component is still not completed. Reopening this.