Tooltip sticking

For what reason, on one page, the tooltip works fine, disappearing after the cursor leaves the button:
tooltip1

And on another page, exactly the same navigation with absolutely the same settings, does not work correctly, with the tooltip sticking:
tooltip2

What can create such a difference and such behavior?

After a long analysis, I found the reason for the correct and incorrect operation of the tooltip on the pages.

In the first case (when the tooltip works correctly), clicking on the tab caused the server action, which in turn, if successful, triggered the smooth scroll component. Smooth scrolling resets the focus from the tab element, thereby preventing the tooltip from sticking.

Everywhere the tooltip sticks, there was a situation where the element came into focus due to clicking on it.

So the best solution I found to prevent the tooltip from sticking is to call an event when clicked, which would move the focus to another element.

There is also a simple solution suggested by @Teodor :


But it has a small drawback. This event does not remove the focus from the element, but only hides the tooltip. So if you go to another tab and then come back, the tooltip will appear again:

It would be great if in the future the component of the tooltip will be improved, so that you do not have to fasten additional events to the elements, and the focus would be removed automatically by the component itself.

1 Like