tooltip: mouseleave don't trigger on disabled inputs and button

Workaround:

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

The solution requires both of these steps to work ^

Workaround:

• Wrap the disabled button/input in another element.
• Add { pointer-events: none; } style to the disabled button/input.
• Set { cursor: not-allowed; } to the wrapper to fix cursor behavior that stops working with previous step (adding pointer-events: none;).

<Tooltip title="Tooltip Title">
  <span style={{ cursor: disabled ? 'not-allowed' : 'pointer' }}>
    <button disabled={disabled} style={{ pointerEvents: 'none' }}>
      button text
    </button>
  </span>
</Tooltip>

I’ve used @sandwich99’s comment and @jennifer-shehane’s workaround (big thanks!!)

@jennifer-shehane Correct me if I am wrong, but using your solution breaks the non-disabled state, the button stops showing cursor: pointer when active and not-allowed when disabled, I’ve extended the fix so it fully works for both disabled and non-disabled states.

Any progress on fixing this?

If any of you guys are using styled-components and typescript with react, then the following solution/work-around (which depends on the solution(s) from @itsmichaeldiego & @jennifer-shehane mentioned above) can be used:

import styled from 'styled-components';
import { Button, Tooltip } from 'antd';

const StyledButton = styled(Button)`
  pointer-events: ${({ disabled }) => disabled ? 'none' : 'auto'};
`;

const StyledButtonWrapper = styled.span`
  cursor: ${({ disabled } : { disabled: boolean }) => disabled ? 'not-allowed' : 'pointer'};
`;

interface BugFreeButtonWithTooltipInterface {
  disabled: boolean;
  // other props...
}

const BugFreeButtonWithTooltip: React.FC<BugFreeButtonWithTooltipInterface> = props => (
  <Tooltip placement="left" title="this is a bug free disabled/enabled button with tooltip">
    <StyledButtonWrapper disabled={props.disabled}>
      <StyledButton {...props} />
    </StyledButtonWrapper>
  </Tooltip>
);

export default BugFreeButtonWithTooltip;

I find a solution, maybe it helps. <Tooltip title="hhhh"> <Button href="" disabled> 删除 </Button> </Tooltip>

Adding an attribute “href”.
According to https://ant.design/components/button-cn/#header <Button href="http://example.com">Hello world!</Button> 则会渲染为 <a href="http://example.com"><span>Hello world!</span></a>

For those who cannot modify the or add a parent element:

• Add { pointer-events: none; } style to the disabled button/input.
• Add the not-allowed cursor to the button children.

For example:

.my-tooltip-class button.ant-btn[disabled] {
  pointer-events: none;

  &>* {
    pointer-events: auto;
    cursor: not-allowed;
  }
}

By disabling pointer-events on the button we also lose the desired not-allowed cursor; for most purposes we can provide a “good enough” fix for this by displaying the not-allowed cursor only on the children. Note that this means the cursor will not be displayed when the user hovers over the padding on the button. As the pointer-events rule is inherited by default, we must also switch it on for the children. Fortunately, this does not trigger the button mouseLeave bug.

Yeah, just trial and error. 😄

@afc163 是的 我试了加span也无效