How to use TooltipTrigger without a Button?

[rostero1]

I'm trying to make my icons more accessible and easier for all users by giving them a tooltip. How can I have the tooltip trigger be a span or svg instead of a Button? The tooltip doesn't show when I try with something other than a button and hover on that element. I'm hoping to have the svg icon labelled by the tooltip text.

This is for RAC.

[rostero1]

There's enough to build my own from here: https://react-spectrum.adobe.com/react-aria/useTooltipTrigger.html. I was just wondering if it was possible to to use just RAC.

[reidbarber]

It doesn't necessarily need to be a Button, but it does need to be something that is focusable so that keyboard and screen reader users can access it, so I think you may want to consider keeping it a Button.

[rostero1]

Thanks. I tried setting the tabIndex on the div, but I couldn't get the popover on hover. I'll have to consider the button. For my use case it could be confusing without it tied to any actions. Thanks as always. Loving this project.

[reidbarber]

You can also try using useFocus+useHover on that div. No problem!

[snowystinger]

Just to add on to @reidbarber's initial comment, and this is more of a thought exercise because we discourage the use of tooltips whenever possible. Why do the icons need a tooltip if they aren't interactive? If it's to convey something like 'error, email is invalid', then that is pretty critical information and I would suggest not using a tooltip to convey that information. We have HelpText and ContextualHelp to aid us in conveying critical information, you might consider using the same.
https://react-spectrum.adobe.com/react-spectrum/TextField.html#help-text
https://react-spectrum.adobe.com/react-spectrum/TextField.html#contextual-help

[rostero1]

The only use case I have for this is a table, where one column is just icons.

[snowystinger]

If that is critical information, then I'd still caution finding another way to communicate it. If it isn't critical, then an aria-label should suffice.
You could also consider having a key, explaining what all the icons are. This could be in a popup tied to the button for the icon.

Again, just some things we've considered. Reid's suggestion should still work if there is no other way, just keep in mind the Screen Reader Mobile users who may have trouble accessing the tooltip if they can't actually click on the icon.