mouseleave don't trigger on disabled inputs and button

[afc163]

<Tooltip title="mouseleave is not work">
  <button disabled>button text</button>
</Tooltip>

react-bootstrap/react-bootstrap#1254

[yiminghe]

use this instead

<Tooltip title="mouseleave is not work">
  <span><button disabled>button text</button></span>
</Tooltip>

[tianyingchun]

对了这个地方 貌似 每次POP 起来 点DOCUMENT 空白消失的情况第一次都没问题，第二次 都提示 this.popupInstance.getPopupDomNode is not a function 第一次都是可以的，我这里用的REACT 1.4 RC
设置Tooltip.props.trigger ="click"

[yiminghe]

突然发现是之前提的 chrome bug... https://code.google.com/p/chromium/issues/detail?id=120132

https://code.google.com/p/chromium/issues/detail?id=536905

[swarajban]

+1, any work arounds?

[benjycui]

好像和这个相关 facebook/react#5762

[anjianshi]

同样碰到这个问题。暂时用这样的方式解决了：

<span style={{display: 'inline-block', padding: 1, marginTop: -1}}>
    <button disabled>提交</button>
</span>

不知道有没有更好的办法

[afc163]

貌似现在加 span 的方式也不好使了：http://codepen.io/anon/pen/xRWRRY?editors=001

[bairedzhang]

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

[afc163]

react-bootstrap/react-bootstrap#1588 (comment)

[sandwich99]

加了 span 更不好使了， bug 如下：

1. 在ButtonGroup 下， 样式错误， 分割线变粗，为 2px
   
2. 设置在 button 上的额外样式失效了， btn-intelligent, 本来设置在 button 上的
   

[ajbeaven]

Any progress on fixing this?

[roser240]

how to add tooltip directly on table row

[sstern6]

@jennifer-shehane is there a reason why this works? Or was it through trial and error?

[jennifer-shehane]

Yeah, just trial and error. 😄

[Hellowor1d]

+1

[udielenberg]

+1

[0xc41qu3]

+1

[itsmichaeldiego]

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.

[benpryke]

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.

[Frank-MJ]

同样碰到这个问题。暂时用这样的方式解决了：

<span style={{display: 'inline-block', padding: 1, marginTop: -1}}>
    <button disabled>提交</button>
</span>

不知道有没有更好的办法

你这个方法，如果鼠标移开快一点的话，是不生效的；

[Ch-sriram]

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;

[flysunshine]

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 ^

thanks a lot! it really helps me

[anjantalatam]

Here is a workaround

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

[evybauer]

I'm facing an issue with Tooltips not getting triggered when the InputPassword component is placed inside a Form and is disabled. The isLockedOrUnauthorized condition determines whether the InputPassword should be disabled or not. Unfortunately, when the input is disabled, the Tooltips do not show up upon hover, which prevents users from receiving additional information when their input is locked or unauthorized.

Steps to Reproduce:

1. Create a Form containing a FormItem with a Tooltip wrapping an InputPassword component.
2. Set the InputPassword component to be disabled.
3. Observe that the Tooltips do not appear when hovering over the disabled InputPassword component.
4. Additionally, try wrapping the InputPassword component in a div or span; this causes the form not to get submitted.

Expected Behavior:
Tooltips should still be triggered when hovering over the disabled InputPassword component, providing relevant information to users even when the input is locked or unauthorized.

Code Snippet:

<FormItem>
  <Tooltip key={tooltipText}>
    <TooltipTrigger asChild>
        <InputPassword
          placeholder="SECRET"
          value={field.value}
          onChange={field.onChange}
        />
    </TooltipTrigger>
    <TooltipContent>
      <p className="first-letter:capitalize">{tooltipText}</p>
    </TooltipContent>
  </Tooltip>
  <FormMessage className="text-left" />
</FormItem>

Environment:

Browser version: Chrome Version 114.0.5735.198 (Official Build) (x86_64)
Operating System: macOS Ventura 13.4.1 (c)
Additional Notes:
I have tested this issue on VSCode and confirmed the behavior described above.

Any insights or help on resolving this issue would be greatly appreciated. Thank you!