[BUG]: tooltip show again after closing the modal

[iamyahia]

Bug description

I have an issue while using the react-tooltip package, here is the description:

I have a button, and when I click it, it opens a modal. After closing the modal by clicking outside of it, the modal is closed, but the problem is that the tooltip appears again, and it is not hidden until we click somewhere else in the body.

Screenshots
here is an example:
1.

case-1.mp4

so i try to find the problem, by using afterHide and afterShow prop and here's the log in console:

case-2.mp4

so here's my code :

<Menu>
        <Menu.Button
          className="px-4 py-2 text-sm font-medium text-gray-700 w-full bg-red"
          data-tooltip-id="my-tooltip"
          data-tooltip-content="Hello world!"
        >
          test
        </Menu.Button>

        <Menu.Items className="py-2 text-sm font-medium text-gray-700">
          <Menu.Item>
            <a className={`block px-4 py-2 `} href="/account-settings">
              Account settings
            </a>
          </Menu.Item>
          <Menu.Item>
            <a className={`block px-4 py-2`} href="/account-settings">
              Documentation
            </a>
          </Menu.Item>
          <Menu.Item disabled>
            <span className="block px-4 py-2 text-gray-400">
              Invite a friend (coming soon!)
            </span>
          </Menu.Item>
        </Menu.Items>
</Menu>

<Tooltip
        id="my-tooltip"
        afterHide={() => console.log("afterHIde")}
        afterShow={() => console.log("afterShow")}
/>

Version of Package
v^5.18.0

To Reproduce
Steps to reproduce the behavior.
1- click the button, it open the modal
2- close the modal
3- tooltip is appear immediately

Expected behavior
i expect when i close the modal, i don't want to show the tooltip message again

If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information if possible or delete this section):

• OS: [MANJARO-ArchLinux]
• Browser [chrome]
• Version [23.]
• Frameworks [React 18]

Additional context

• i test it with <a></a> anchor tag and it seems no problem with it, but i requred to use <button></button> tag, because of the code-base.
• i fix this problem, with using state but i work on large project, with hug code-base and it's amazing if i use those attributes:

1. data-tooltip-id="my-tooltip"
2. data-tooltip-content="Hello world!"
   is there anyway to fix this problem ?
   is that a bug, or the problem in implementation ?

[gabrieljablonski]

Please upgrade to the latest react-tooltip version and try again.

There was a bug similar to this, but I can't remember if it was fixed before or after 5.18.0.

[iamyahia]

Please upgrade to the latest react-tooltip version and try again.

There was a bug similar to this, but I can't remember if it was fixed before or after 5.18.0.

⛔ That's not solve my problem, i update the package for version 5.21.4 but it still the same issue !!

[gabrieljablonski]

it's just a guess, but the button might be getting focused when the menu is closed. By default, the tooltip opens on hover, and on focus. Try tabIndex={-1} on the button (just a test, not a permanent fix).

If that doesn't work, please provide a CodeSandbox (or similar) reproducing the issue so we can properly evaluate it.

[iamyahia]

it's just a guess, but the button might be getting focused when the menu is closed. By default, the tooltip opens on hover, and on focus. Try tabIndex={-1} on the button (just a test, not a permanent fix).

If that doesn't work, please provide a CodeSandbox (or similar) reproducing the issue so we can properly evaluate it.

@gabrieljablonski tabIndex={-1} not worked, and of course here's the codesandbox with the same case :
https://codesandbox.io/s/lucid-satoshi-l7cl79?file=/src/TestDropDown.jsx

thank you for your care

[gabrieljablonski]

The issue is in fact caused by the button getting automatically refocused when the menu closes. The reason we use the focus event is to allow the tooltip to also open when an element gets focused through keyboard navigation.

By reading this section on the @headlessui docs, it is clear that the button gets refocused programmatically when the menu closes, so that's why tabIndex={-1} didn't work.

If keyboard navigation is not a requirement for you, try using onFocus as in this example.

<Menu.Button
  className="px-4 py-2 text-sm font-medium text-gray-700 w-full bg-red"
  data-tooltip-id="my-tooltip"
  data-tooltip-content="Hello world!"
  onFocus={(e) => {
    // immediately blurs after focus
    e.target.blur();
  }}
>
  test
</Menu.Button>

If this is a not an acceptable solution for your project, let us know and we'll try to think of another alternative.

[iamyahia]

that's amazing solution, and it's worked perfectly
but we face a problem
we work on a large project with huge-code-base as we say in the past.

so it's not best-practise and good-solution to add onFocus function to all buttons in our system, in difference places, and in most cases we're using button.

in other side of project we're not using headlessui, like we're just used simple button tag or custom drop-down menu, and it have same problem .

so the best-practise for our project is that the package handle all those things, and it's give us a very clean-code .

[gabrieljablonski]

That's understandable. As you can see on this other issue here, we're already planning on making it possible to select which DOM events the tooltip should listen to, but it will probably take a while until we get to that.

My suggestion is to either use patch-package, or simply fork the react-tooltip project to remove these two lines.

I'm sorry that we can't help more directly, but unfortunately it will probably take some time until we work on it. Hopefully one of this alternatives works for your project.

[gabrieljablonski]

As noted above, this is a poor interaction between the tooltip opening on focus, and the headlessui component refocusing by itself. Thus, I wouldn't classify this as a bug, and more of a lacking feature on the tooltip (disabling opening on focus), which will be addressed eventually (#1096).

[zvs001]

I experience similar bug, but when navigating between pages. When page is mounted, tooltip appears automatically. I checked events: hover and focus events were not fired. tabIndex didn't help me.
I checked versions and noticed that bug appears in v5.26.1+, when 5.26.0 and 5.25.2 works well.

[gabrieljablonski]

@zvs001 are you able to provide a reproducible example?

Try using openEvents and closeEvents to ensure it is indeed not related to focus.

<Tooltip
  openEvents={{ mouseenter: true, focus: false }}
  closeEvents={{ mouseleave: true, blur: false }}
/>

[Dan-Mqs]

Hello, just to add a little feedback.

I had the same issue as OP, but I'm using react-bootstrap component lib. It happened very similarly as reported here, but after closing a Modal or Offcanvas component from react-bootstrap. It seems to me the cause was also the refocusing of the button by react-bootstrap, since disabling focus on openEvents prop solved the issue.

[email protected]
[email protected]

Thank you!