useTooltip: add focusVisible option for rendering tooltip

[ashleyryan]

Provide a general summary of the feature here

We use the useTooltip and useTooltipTrigger hooks to build icon buttons with tooltips the display on focus or hover. This works well enough for accessibility, but it was recently reported to us that when a modial dialog closes and focus is restored to the icon button, the tooltip appears on focus, even if the user is a mouse user who wasn't hovering over the tooltip. It makes sense, of course, since the tooltip is now focused.

It would be great if there could be a focusVisible option on the tooltip options to only display the tooltip when focus visible is true. I know other components/hooks use this logic.

https://codesandbox.io/p/devbox/black-field-7wfm5g

🤔 Expected Behavior?

I want to only display the tooltip when focus visible is true, that is, when a user is using a keyboard to navigate the page, not when focus is manually placed on the element for accessibility (like when focus is restored to the trigger element when a modal dialog is closed).

😯 Current Behavior

the tooltip appears whenever the element receives focus, even if the user is using their mouse to navigate the page and not currently hovering over the element

💁 Possible Solution

No response

🔦 Context

It's been reported by our engineers that it can be confusing for engineers for the tooltip to appear when it wasn't there previously

💻 Examples

No response

🧢 Your Company/Team

No response

🕷 Tracking Issue

No response

[nwidynski]

Just to clarify, do you consider it fine if a Modal closed via "Esc" key causes the tooltip on the trigger to be displayed? Since a key press preceded focus restoration I'm fairly certain focus will be visible.

[ashleyryan]

Yes, sorry, that would be fine. Esc was the easiest way to close the dialog in this sandbox, but imagine clicking a close button or outside the dialog.