ant-design Wrap < Select> with < Tooltip>, hover on < Option> shoud not show tooltip

wfauudbj  于 3个月前  发布在  其他
关注(0)|答案(4)|浏览(71)

Steps to reproduce

click <select /> , hover on opened menu

What is expected?

don't show tooltip when user hover on the select options.

What is actually happening?

tooltip gets shown
| Environment | Info |
| ------------ | ------------ |
| antd | 4.20.6 |
| React | lastest |
| System | Macos |
| Browser | Chrome |

e0uiprwp

e0uiprwp2#

I have the same issue. Is there any solution to this problem?

2o7dmzc5

2o7dmzc53#

I have the same issue. Is there any solution to this problem?

I found a workaround. Attach the toolip to a transparent node like this:

<Select
  onMouseEnter={() => dropdownVisible || setShowTooltip(true)}
  onMouseLeave={() => setShowTooltip(false)}
  value={selectValue}
  onDropdownVisibleChange={open => {
    if (open) setShowTooltip(false)
    setDropdownVisible(open)
  }}
/>
<Tooltip
  visible={showTooltip}
  title={tooltipContent}
  placement='bottom'
>
  <div style={{ position: 'absolute', top: '20px', left: '45px' }}></div>
</Tooltip>

相关问题