Use of tooltip on an element not focusable natively

[Fazle-Jahangir]

[Redacted]

Non-public information

[nkrantz]

Hi @Fazle-Jahangir! Chatting with the team about this. We'll get back to you after the long weekend. Cheers!

[nkrantz]

Hi again! You're correct that placing a Tooltip on a non-focusable element is not accessible, because the Tooltip content would be unreachable by some users. The workaround you're referring to is a bit hacky and not an expected pattern for users (focusing on a Card to see a Tooltip).

We'd recommend placing the Tooltip on a regularly focusable element, following the guidelines you mentioned. Maybe an Icon Button. Alternatively, you could find a new way to display the information in the Tooltip. Is a Tooltip really necessary in this design? It's often possible to find workarounds for the Tooltip, like displaying the information as part of the Card, for example.

Let us know where you end up with this design, and if you have any more questions!

[cdpestitschek]

Ei @nkrantz

I have a few questions to complement in this exploration.

Should we consider that we have different guidances for cards and graphics?

In the library recommended by the Paste team, the Highcharts also explore the use of tooltip for data point exploration

https://www.highcharts.com/demo/arearange-line

I understand that on the card we could show, and think about how to demonstrate this non-main data. But in interviews we have noticed that they want only the main metrics available, and in the case of understanding better. then yes they would like to have a way to analysis on that specific data. This is one of the reasons for not being at first glance (they consider that showing everything at once pollutes the screen)

The motivation for inserting only the explored case was given that we can have numerous dimensions per metric, another thing is that we would only be placing the non-primary dimensions within the tooltip.

Today we are talking about a card with only a single metric, in the future we would like to accommodate more primary metrics of the same taxonomy. so thinking about a scenario where we would have 2 to 3 information (we would already be thinking of (at least 6-9 information per card being displayed at once. Could we work together and exploring the specific use cases for data visualisation?

Giving visibility: For the next explorations we aim to have an export in csv or any other accessible way to have all this data something like that, where it will be possible for the person to download the main metric and the existentes dimensions.

[nkrantz]

Hey @cdpestitschek, thanks for adding that context.

The reason that the Highcharts tooltip example you referenced is accessible is because the user is able to navigate to and view all of the tooltips using their keyboard. If you tab into the graph, you can easily use the arrow keys to view each tooltip. There's only a small bit of information in each tooltip, and the amount of information in each tooltip is always the same. This pattern is pretty understandable and keyboard/other assistive tech users know what type of navigation to expect when they see it.

When a user sees a page with cards containing static information, the expected pattern is not to be able to tab to one of the cards and see more information. It can be a confusing and irregular experience that might lead to your users missing out on that information hidden in the tooltip. Even mouse users might miss out on the tooltips, because there's no expected hover behavior on cards.

Because you may end up adding more information into these tooltips in the future, and even potential actions such as an export action, I'd strongly recommend using a Popover instead of a Tooltip, with the Popover Button being an Icon Button (maybe an info icon). Popovers allow for much more dynamic content than tooltips do. We wouldn't recommend putting up to 9 pieces of information in a tooltip. The user would have to keep their cursor on the card to read all of it, and wouldn't even be able to highlight/copy any of the contents because removing the cursor from the card would close the tooltip.

A Popover will also allow you to add actions to the contents, in case you want to add your export button to the additional data. When you get around to that work, I'd recommend taking a look at our Data Export Pattern.