Tooltip and Popover do not work on disabled buttons in Chrome-based browsers

[mathieucaroff]

Reproduction link

Steps to reproduce

Use a disabled button inside as child of a Tooltip or Popover.
Hover over the button with the mouse.

What is expected?

The Tooltip box or Popover box should appear.

What is actually happening?

Most of the time, nothing happens.

Environment	Info
antd	4.15.1
React	17.0.2
System	Windows 10 and MacOS 12.2.1
Browser	Chrome 103.0 as well as Edge and Safari

---

This bug does not affect Firefox. This bug shows in Storybook.

Similar issues:

• Tooltip don't work on the disabled Input  #30191
• Tooltip does not disappear when button is disabled #9581

The solution proposed in issue 30191 of wrapping the button in a div does not work.

[github-actions]

You may look for issues:

1. 52% Not Testable: Lot of AntD component doesn't work well with testing-library #31595

_{🤖 By issues-similarity-analysis}

[mathieucaroff]

I'm hardly able to reproduce this issue consistently, even in the Storybook, I'm not sure what's going on :T

[Mzhang1994]

I'm hardly able to reproduce this issue consistently, even in the Storybook, I'm not sure what's going on :T

I think it will happen when you move mouse from a tooltipless one to a tooltip one directly. No matter it is a disabled one or not.

[afc163]

Resolved this issue in

ant-design/components/tooltip/index.tsx

Lines 83 to 86 in a2c7ea4

	// Fix Tooltip won't hide at disabled button
	// mouse events don't trigger at disabled button in Chrome
	// https://github.com/react-component/tooltip/issues/18
	function getDisabledCompatibleChildren(element: React.ReactElement<any>, prefixCls: string) {

, cannot reproduce in your codesandbox.

[shamseerahammedm]

+1 getting same issue on "antd": "^5.1.5",, popover not coming when wrapped in disabled buttons

<Popover content={<div>Reject</div>} placement="bottom">
 <Button 
   onClick={() => somefunction(rowSelectionModel)}
   disabled={true}
 >
   Reject
 </Button>
</Popover>

[sawhil]

+1 getting same issue on "antd": "^5.1.5",, popover not coming when wrapped in disabled buttons

<Popover content={<div>Reject</div>} placement="bottom">
 <Button 
   onClick={() => somefunction(rowSelectionModel)}
   disabled={true}
 >
   Reject
 </Button>
</Popover>

Wrap the button in a div. It should work. Hover events are disabled when the button is disabled.