Show tooltips via an info icon

[cre8]

Right now the information about a column are placed as a tooltip:

• pro: clean design since the info icon is not popping up multiple times
• con: you only see the info if you know that you need to over over the name of the column name

Following the material design guide, I saw no information how to deal with this way https://m1.material.io/assets/0B3mOPoJlxiFhenh5SWhFdFlyajg/components-datatables-interaction-tooltip.png

It would look like this (small css errors):

I personally don't like this, but open to be discussed.

[samuelmr]

I'm not fond of repeating icons.

Perhaps this could be implemented in the way that the icons are there but hidden by default and only shown on hover.

.info {
  margin-left: 5px;
  display: none;
}

th:hover .info {
  display: inline;
}

[cre8]

We have the hover effect already with the tooltip. The point adding the info icon was to inform the user that there are information so he needs to move his mouse there.

Suggestion: we add another link in the navigation showing a page with some kind of glossar (what is the definition of each column)

[maaikevanleuken]

I agree with Samuel that the repetition of these icons is not preferable. At the same time, it would be great that at least some information is clearly visible in the overview. Maybe we can keep the hover-over for now, but add a row with descriptions directly below the 2nd row with characteristics, with some kind of toggle to collapse this row.

Another suggestion is to leave this as is for now, and validate this with our target audience (we will do this anyways, but specifically this usability aspect we can test).

[cre8]

@maaikevanleuken I like your suggestion. I tagged this issue and would leave it open since we haven't found a solution for this problem yet.