Tooltip stays open when you switch tabs

🐛 Bug report

The tooltip does not hide when the tab moves out of focus.

💥 Steps to reproduce

1. Go to https://codesandbox.io/s/vibrant-fermat-1mxhc?file=/src/index.js or https://chakra-ui.com/docs/overlay/tooltip#tooltip-with-focusable-content
2. Click on the “Button” which is wrapped in <Tooltip />
3. Switch the tab and move your cursor
4. Revisit the original page (with the Button), the tooltip will not be hidden.

💻 Link to reproduction

Click the button here: https://chakra-ui.com/docs/overlay/tooltip#tooltip-with-focusable-content

CodeSandbox reproduction: https://codesandbox.io/s/vibrant-fermat-1mxhc?file=/src/index.js Steps:

1. Click on the button.
2. Switch to a different tab.
3. Return to the codesandbox.

🧐 Expected behavior

The tooltip should not be visible when you return to the tab after switching to a different tab.

🧭 Possible Solution

Remove “focus” on the element when the user moves out of the site.

🌍 System information

Software	Version(s)
Chakra UI	1.6.3
Browser	Chrome
Operating System	Arch Linux

📝 Additional information

https://user-images.githubusercontent.com/42958812/119809624-f10e0600-bf02-11eb-8368-6b44fd1ac693.mp4

[aboveyunhai]

To solve this problem without change the current api behavior is to use useRef(). This code should be typescript compitatble.

const btnRef = useRef<HTMLButtonElement>(null);

<Tooltip hasArrow label="Search places">
  <Button
     ref={btnRef}
     onClick= {
     // whatever your functions here
     // blur at the end of the click to remove the button focus 
     
     if (btnRef.current) btnRef.current.blur()
     }
   >
     Button
   </Button>
</Tooltip>

[aboveyunhai]

@roerohan Your solution indeed better than mine since mine can cause some accessibility issue. blur should be used carefully. And based on the issue #500 you refer, there are some questions we must ask ourselves as Devs. I wonder what kinds of user cases we are trying to propose.

Button is "disabled”, Tooltip is not. Then there is not accessibility for disabled button since the disabled button cannot be focused. So Tooltip will be only beneficial for regular user.

So my own solution based on yours and the issue, might be that we will never “disable” the button by using disabled, using CSS instead, to fully cover all cases I can imagine so far. Notice that even when button is disabled. We can still use “Tab” key to get the button and read the disabled Tooltip hint. It’s quite lengthy but it should cover all your needs along with the issue #500.

  const btnRef = useRef<HTMLButtonElement>(null);
  const [isDisable, setDis] = useState(false);
  const [isTooltipDis, setTooltipDis] = useState(false);

  <Tooltip hasArrow
    label={isDisable ? "button is disabled" : "I'm a tooltip"}
    isDisabled={isTooltipDis}
  >
    <Box  display={"inline-block"}  cursor={isDisable ? "not-allowed" : "pointer"}>
      <Button ref={btnRef} pointerEvents={isDisable ? 'none' : 'auto'} opacity={isDisable ? 0.65 : 1}
        onClick={() => {
          if (isDisable) return;
          console.log('running ')
        }}
        onMouseOut={() => { if (btnRef.current) btnRef.current.blur(); }}
      >
        Button
      </Button>
    </Box>
  </Tooltip>

You can play around the code here. https://codesandbox.io/s/ancient-pond-yl20h?file=/src/index.tsx