Tooltip flickers with multiple child elements

[Adam Nielsen]

If you have a tooltip with multiple child elements, the tooltip flickers as the mouse is moved over the child elements.

Here is an example: https://codesandbox.io/s/blazing-violet-21r9m

If you move the mouse cursor between the text and the icon, the tooltip keeps disappearing and appearing again, but I would like it to appear once and remain visible until the mouse cursor is moved outside of the button, then it should disappear.

Is it possible to make the tooltip stay visible while the mouse is moving among the <Tooltip> children, the same as when there is only one child element?

Also (as a separate issue) is it possible to set a timer so the tooltip does not appear until ~600 milliseconds after the mouse has entered the child element, to more closely match the behaviour of a desktop app?

Thanks!

[Eastblue]

@Malvineous Hello friends, thank you very much for your feedback😁

1. Tooltip flickers as the mouse is moved over the child elements is a bug 🐞！At present we have located the cause of this problem #1034
2. For the problem of delayed display, Tooltip has a prop to achieve this function delay. Sorry about we didn’t show it in the document. But I just found another bug in delay.

We will fix these two problem as soon as possible.😝

[Adam Nielsen]

Great news, thanks for your quick reply! There is no rush, I will wait for the next version when you are ready 😁

[Eastblue]

@Malvineous We have fixed both of these issues in the latest version, which can be experienced through shineout@next or 1.6.5-rc.2
#1104 shows the specific changes.
😄

[Adam Nielsen]

Many thanks! I upgraded to 1.6.5-rc.3 and the problem has been solved 😁

Is there a way to set the default delay globally? I would like all tooltips to default to a delay. Do I need to put delay=xxx on each one or can it be set once as a default for the whole project?

Thanks again for all your help!

[Eastblue]

@Malvineous There is no such feature yet, but we will add it in the next version
Thanks again for your suggestions 😁

[Adam Nielsen]

Thank you! The default delay is probably not so critical now, as I have remembered I can just create my own component for it. I have switched to using the Popover now as you have recommended, so I can just do:

// MyTooltip.js
export default (props) => (
  <Popover
    mouseEnterDelay={1000}
    {...props}
  />
);

Then in my code I can just use <MyTooltip/> as needed instead of <Tooltip/> or <Popover/>.