primitives: [Tooltip] Keep tooltip open when trigger is activated

I can contribute an example use case. 😃

Sometimes, we may have buttons or interactive components that copies a value when clicked. E.g. “click to copy URL”. In such a case, we may want the tooltip to remain open after clicking on it so that we can show the the value is indeed copied to the clipboard.

You can also see here an example of how to keep it open on activation thanks to the update: https://github.com/radix-ui/primitives/blob/main/packages/react/tooltip/src/Tooltip.stories.tsx#L588-L614

Just to make sure that the line reference won’t change https://github.com/radix-ui/primitives/blob/768bc53149aa1f432b5e630b99589237f6333364/packages/react/tooltip/src/Tooltip.stories.tsx#L617-L643

This has been addressed in #1290 and is now available in the latest rc: https://www.npmjs.com/package/@radix-ui/react-tooltip/v/0.1.8-rc.2

You can also see here an example of how to keep it open on activation thanks to the update: https://github.com/radix-ui/primitives/blob/main/packages/react/tooltip/src/Tooltip.stories.tsx#L588-L614

Wouldn’t preventing default in the onMouseDown also prevent the button from receiving focus though?

Yeah, and also dragging and the :active state on some browsers.

I think relying on native event.preventDefault() is an anti-pattern, not only because of what @jjenzz said. But also because users will rely on implementation details. What if the library starts doing the action in the onPointerDown event instead of onMouseDown in the future?

Exposing props like the suggested closeOnClick is a better solution in my opinion.

I can contribute an example use case. 😃

Sometimes, we may have buttons or interactive components that copies a value when clicked. E.g. “click to copy URL”. In such a case, we may want the tooltip to remain open after clicking on it so that we can show the the value is indeed copied to the clipboard.

Please share example code

Yeah if I put my “feel” aside and think pragmatically, I think you’re right, basically anything that is “dismissable” by design should dismiss just itself.

Yeah that’s all great points. We discussed this many times actually but for some reason I didn’t think of it this time, so yeah perhaps we should add a custom event or something like that.

Exposing props like the suggested closeOnClick is a better solution in my opinion.

We usually expose CustomEvents like onDismiss/onClose that consumers can event.preventDefault() to avoid reliance on implementation detail and unexpected side effects.

There are often custom side effects/an alternate behaviour people want to implement when preventing ours so the event approach gives them the opportunity to do both all in one prop (reduces API surface).

In the tooltip case, it isn’t likely that they need to action something else as part of that event but would be good to keep our APIs consistent.

Ah sorry, my bad it looks like we have an onMouseDown too, so if you do the same in onMouseDown it should work.