Tooltip captures your click, perhaps blocking your intent

[jasmussen]

When you hover an element, custom tooltip appears. If you are unlucky, that tooltip actually blocks where you intended to click, capturing the click rather than letting you "click through it", like a system level tooltip would. The best example to reproduce this is to hover the post editor site logo, see the "View Posts" tooltip appear; perhaps you just wanted to click the inserter, accidentally hovered the site logo that invokes the tooltip, and now it blocks your click. GIF:

The tooltip seems correct enough, so the question is more one of: can this behavior be changed to be similar to how default unstyled operating system tooltips behave, i.e. when you click it's the element below the tooltip that gets the click?

[lukecarbis]

One thing I noticed is that the tooltip stays exactly where it is once it's been clicked on. Even moving away from the hover target area keeps it in place. Maybe this is a bug, or maybe it's intentional behaviour. But one simple solution would be to have the tooltip disappear on click, so that the control below it becomes visible.

[jasmussen]

@mirka in case you know, would something as simple as applying pointer-events: none; on the tooltip container be sufficient?

[mirka]

I think there's some internal logic to keep the tooltip visible when the cursor is moving towards the tooltip. Moving the cursor away from the trigger closes the tooltip immediately, unless you're moving towards the tooltip. So we should first try seeing if any combination of props here would disable that behavior? Because even if we can ignore pointer events on the tooltip, it's still weird to have to "click through".