inconsistent tool tips

[martinpitt]

We currently have at least three tooltip styles. On our React pages, like kdump or React Patterns:

On the system page there are "broken" ones on Hardware and Machine ID, as well as the navigation menu items on the left:

This is because this just sets the title= attribute instead of using the jQuery .tooltip() method. When doing that, they look like the React ones:

Finally, on the system page on the blue (i)s we have this style, which also needs to be clicked, not just hovered:

We should pick one style and apply it consistently.

The React one has a nice contrast and looks a little more "distinguished". The latter (white) one is nicer for showing icons, as the grey one has poor contrast in this case:

(The text color is wrong, I haven't looked into that yet - but the icon is the point here)

Hint from @garrett: try text-shadow

[garrett]

Accessibility concerns:

1. title should be used when possible; if it gets "upgraded" from the browser-based tooltip to the richer one, fine, as along as it's accessible.
2. For the "synchronized with" — would you really want a robotic voice reading off that IPv6 hostname to you? We need to be aware of problems like this (as aXe and other tools will not let us know).

[andreasn]

I think those are good accessibility concerns regarding the IPv6 hostname, and thanks for bringing those up!
But let's keep this issue about the presentation of the different tooltips, and then file specific a11y bugs as separate issues.

[garrett]

Browser tooltips

• uses the title attribute; browser handles this natively
• Example: second screenshot, system hardware information
• Browsers tooltips should not be used. These should be upgraded to PatternFly / jQuery rich tooltips.

PatternFly & jQuery tooltips

• PatternFly's implementation of tooltips; style and functionality is also shared with jQuery's .tooltip()
• Example: first screenshot, kdump status
• Tooltips should be used when extra information should be handled.

PatternFly Info Tips

• PatternFly's Info tips: requires clicking and can be interacted with
• Example: fourth screenshot, system time
• Info tips should be used when contextual menus are needed.

---

Summary: Use PatternFly / jQuery tooltips when you need tooltips. Info tips should only be used when you expect interaction.

[garrett]

(The above is based on a conversation on IRC earlier today. Please correct if wrong.)

[martinpitt]

Thanks @garrett for the summary! So I'll go with the transparent-gray notifications by default on the systems page and the menu navigation for now, and will try text-shadow for the icons.

[martinpitt]

The nav menu also uses browser "title" style tooltips:

But converting them to the jquery/PF ones looks really crappy, due to gray-on-gray:

So I suppose I leave these alone for now, and just clean up the /system page for now.

[garrett]

Yikes. I think titles are only needed in the navigation when the string is truncated anyway. It's visible and screen readers should pick up the items without resorting to title.

When I redid the nav, I tried to make sure even the longest of our labels fit in without truncation. Perhaps we can just remove the title attributes in this subnav? 🤷‍♂️

[martinpitt]

Perhaps we can just remove the title attributes in this subnav

Indeed! They are just redundant. The simplest ideas are the best 👍