Tooltips for Icons

[CourtneyFleeger]

Hey components team,

I'd love it if we could get tooltips for icons in V3. Once the app dev group gets the css for them, maybe we can implement that design for tooltips?

Courtney Fleeger needs to get it together and get that done for this to happen. Here's the drafted file that is a work in progress with some prototypes: https://www.figma.com/design/wB94K8rE0YJiMa02D6U9ng/WIP-%2B-Team-Troubleshooting?node-id=4480-981&t=9AmH9S6ey96WbLTn-1

Here's the NN group's example of how to use tooltips, which includes using them for icons: https://www.nngroup.com/articles/tooltip-guidelines/

Thanks!
Courtney Fleeger

[marvel-uiuc]

If we create a tooltip component, I'm sure it could be incorporated into the icon component as well.

My only real concern is accessibility. Here's an implementation that's been discussed in W3C that seems to meet requirements:
https://zoebijl.github.io/apg-tooltip/

Important points for tooltips are:

• Tooltip needs to make it clear which element it belongs to.
• Opens with hover and focus, and stays open as long as focus remains or the mouse is on the triggering element or the tooltip itself.
• Closes with escape without moving the focus or mouse.
• Must not include interactive content in the tooltip content.

There is an alternative pattern called toggletip that allows for interactive content, but then the actual element that opens it must not itself be an action beyond opening the toggletip.

[CourtneyFleeger]

The tooltip Figma file is updated: https://www.figma.com/design/wB94K8rE0YJiMa02D6U9ng/WIP-%2B-Team-Troubleshooting?node-id=4480-981&node-type=canvas&t=IuDskvFkZO5rH9LB-0

I also have some sorta confusing Figma css in a file for you if you wish to use that.

[marvel-uiuc]

Great, I'll bring it up with the component developer team.

I see there's also a page for popovers in Figma, that would likely be part of the same component, since much of the code would be the same.

As far as Figma's CSS goes, that tends to hinder more than help. Figma doesn't take into account how that CSS fits into the rest of the page, and it has no concept of responsive design or accessibility. It's also often just plain wrong. I do sometimes use it for very specific things, like copying a gradient, but I tend to look at the "Properties" view in Figma rather than CSS.