Tooltip does not disappear when button is disabled

[Sokal21]

Version

3.2.3

Environment

Chrome

Reproduction link

https://codesandbox.io/s/64zprz4vmn

Steps to reproduce

Pass the mouse over the button, and then take it out without passing it over the tooltip

What is expected?

The tooltip should disappear

What is actually happening?

the tooltip stays opened

---

I'm using styled-components to make styles for my components, I'm creating a custom styled components from an antd Button. The problem is that when this button is disabled and I hover over the button the tooltip does not go away. The issue is related to this specific line: https://github.com/ant-design/ant-design/blob/master/components/tooltip/index.tsx#L121 , here you cant identify that is an antd Button or a coomon button because we are using styled component.

[dengfuping]

@Sokal21 You can control whether the tooltip disappears or not with the visible prop, as the demo https://codesandbox.io/s/1r2z9463yl shows.

[ant-design-bot]

Hello @Sokal21. Please provide a online reproduction by forking this link https://u.ant.design/codesandbox-repro. Issues labeled by Need Reproduce will be closed if no activities in 7 days.

[Sokal21]

@dengfuping I need the tooltip to be displayed even when the button is disabled

[cloudever]

Did you notice that everything works well with an inline button?
IMHO that behavior caused by ref exported from the styled-components wrapper and may be related to one.

[Sokal21]

@cloudever Yes I realized, but I need to use the styled-component wrapper.

[afc163]

Try this as workaround: https://codesandbox.io/s/nkwv5l9k40

[dengfuping]

@afc163 The problem exists still. Maybe we should to make Tooltip more compatible for styled components.

[afc163]

https://codesandbox.io/s/l5qpjp2k4z

[afc163]

const StyledButton = styled(Button)`
  width: 300px;
`;

+ StyledButton.__ANT_BUTTON = true;

[codercatmomi]

如果是 checkbox呢？
StyledButton.__ANT_BUTTON = true;
这句应该怎么样？

[codercatmomi]

@afc163
如果是 checkbox呢？
StyledButton.__ANT_BUTTON = true;
这句应该怎么样？

[mcarlotta]

Experiencing same issue as well in our application. You have to re-hover over it to remove

[dengfuping]

@codercatmomi It's the same as above.

ant-design/components/tooltip/index.tsx

Line 124 in ad72111

if (((element.type as typeof Button).__ANT_BUTTON || element.type === 'button') &&

[udielenberg]

@dengfuping

Does adding Button.__ANT_BUTTON = true; has any side effects beside fixing the bug?

[francois-clement-1]

I fixed this problem with react-component/tooltip#18 (comment).

Workaround:
Wrap the disabled button/input in another element.
Add {pointer-events: none} style to the disabled button/input.

[Podsclan]

I fixed this problem with react-component/tooltip#18 (comment).

Workaround:
Wrap the disabled button/input in another element.
Add {pointer-events: none} style to the disabled button/input.

It worked for me, thank you!

[damiangreen]

This workaround this causes the tooltip to not show at all for me(when the child component is a disabled Switch).

[ofkarakus]

I fixed this problem with react-component/tooltip#18 (comment).

Workaround:
Wrap the disabled button/input in another element.
Add {pointer-events: none} style to the disabled button/input.

It worked for select[disabled] as well. Thank you!

[anjantalatam]

Here is a workaround

<Tooltip title={!disabled ? "Tooltip" : null}> 
    <Button
         type="primary"
         disabled={disabled}
     >
         Tooltip Button
     </Button>
</Tooltip>

Open in Codesandbox

[lichspace]

Here is a workaround

<Tooltip title={!disabled ? "Tooltip" : null}> 
    <Button
         type="primary"
         disabled={disabled}
     >
         Tooltip Button
     </Button>
</Tooltip>

Open in Codesandbox

nice in my case