Tooltip library for field information

[DanyCaissy]

Potential library: https://atomiks.github.io/tippyjs/

---

To save space on the interface, I think we could use tooltips for fields that require short clarifications.

For example: https://i.imgur.com/6dbBk72.png

These text snippets could be replaced by tooltips, which could make the interface a little less overwhelming whilst allowing users to understand the fields.

Some fields could use more information, for example this one: https://i.imgur.co/hFSCtqL.png

We'll still have to identify which snippets should be replaced by tooltips, some of the more complex ones might remain snippets.

[DanyCaissy]

I'm looking at this again and I think this might be a little subjective. With this, we'd be able to clean up the interface from something like this: https://i.imgur.com/i8fgYKW.png

To this:

https://i.imgur.com/iTHv79V.png

(I left the number format as description as it is long and contains links)

Essentially we'd replace most descriptions with tooltips, which would save up a lot of space, with the downside that the user would need to hover over each field when they need information. Most of the time the same user would not need to read the field information every time they use it (they would remember it) so it seem to me that it could work.

What are your thoughts on this @rodica-andronache @contactashish13 ?

[contactashish13]

@DanyCaissy both the images you have linked to look almost the same. Can you check them again?

My 2 cents:

From a UI point of view, it would make it compact. But from a UX point of view, I think it will be detrimental. Many users already don't care to read instructions such as this one below that always show and hiding it from them until they hover/click is going to cause more people to miss these things.

We should find a balance between minimizing user interaction and giving a compact UI.

Instead of changing all instructions to tooltips, as an initial step we can change only the larger ones as an experiment.

One thing to remember is that the correct tooltip library needs to be chosen - our descriptions often have links (like the one about formatting) and users needs to be able to click that while hovering. Not all tooltip libraries support that.

[DanyCaissy]

@contactashish13 The difference between the two is just the description that is missing on the lower fields.

I think the library above should cover the ability to click links (https://atomiks.github.io/tippyjs/v6/html-content/)

I'm fine with starting with just the larger descriptions, it'd unclutter the UI some.