[BUG] Tooltip scrolls with the page

[MarkNygaard]

Describe the bug
I have a "Scroll to top" button in the bottom of my page. When hovering the tooltip shows "Scroll to the top".

For scrolling to the top the button have

onClick={() => {
  window.scrollTo({ top: 0, left: 0, behavior: 'smooth' });
}}

With version 4.5.1 the tooltip disappears at once the button is clicked and the page scrolls to the top. With version 5.5.2 the tooltip is not disappearing but instead scrolling down the page on top of the button.

Version of Package
v5.5.2

Expected behavior
I expected the tooltip to disappear as soon as the button is clicked.

Screenshots

[gabrieljablonski]

Try setting the tooltip prop positionStrategy to "fixed", that might fix the problem with positioning.

As for the tooltip not disappearing when clicked, that is expected behavior. In v5 we have two modes for the tooltip: "hover" and "click". The default mode is "hover", and the way it works is that the tooltip will stay open as long as you're hovering the anchor element.

We might add in the future something like a closeOnClick prop to allow for easier customization. But right now, if you really need the behavior you describe, you'll need to control the tooltip state manually with isOpen and setIsOpen. You can check the docs for an example.

[MarkNygaard]

Setting it to fixed made it stay in the original position which was better but I ended up implementing close on click and it works perfect.

Thank you for the help and quick reply!