Allow tooltips to accept prop "interactive: true" so that tooltips can be hovered over without closing

🚀 Feature request

Chakra UI tooltips currently close immediately the moment you move your mouse away from the component that the tooltip is attached to. With tippyjs (also built on top of poppy.js), you can pass the prop interactive: true to make tooltips stay open if you hover over them, only closing when you hover way from both the tooltip and the component.

🧱 Problem Statement / Justification

This should be added to Chakra UI because I want to continue to use the otherwise fantastic tooltip component, rather than important the tippyjs dependency and then have to rebuild the tooltip with the animations and placement options, just to get the interactive prop and have tooltips stay open on hover.

Additionally, the popover component is not a solution because it requires a click to open and close.

✅ Proposed solution or API

Here is a demo of the requested behavior for Chakra UI - https://atomiks.github.io/tippyjs/#interactivity Notice that you can hover over the tooltip without it closing.

[Andarist]

IMHO to deliver the best experience for users by default this should be a default - and not something that is hidden behind an option. Speaking as a user of the web - I find it often quite frustrating when tooltips are disappearing when I hover them.

[Andarist]

1. Not sure what the difference is but it definitely closes for me: https://www.loom.com/share/fc009d801e2440409d253177bb7eb620
2. yep, I’m aware of this rule but I’m not sure if text selection is “interactivity”. I see how it could be treated both ways so if you want to treat it as interactivity, then that is fine by me

However, I still believe that tooltip disappearing on hover is a problem. I think we can guide ourselves here with the “hoverable” success criterion from the WCAG document. It states that:

Hoverable: If pointer hover can trigger the additional content, then the pointer can be moved over the additional content without the additional content disappearing;

It feels like if we meet this precondition (“If pointer hover can trigger the additional content”) then we should implement the mentioned required part (“the pointer can be moved over the additional content without the additional content disappearing”) to meet this success criterion.