单击鼠标时隐藏工具提示

Question

使用antd设计，工具提示与下拉菜单冲突。最好的解决方案是在用户单击下拉菜单后隐藏工具提示，从而只关注下拉菜单，因为它们相互重叠。

工具提示显示在用户登录信息下拉菜单的悬停位置，位于屏幕的右上角始终为

return (
<Dropdown
key='dropdown1'
overlay={menu}
trigger={['click']}
placement="bottomLeft"
>
<Tooltip
title='Aqui você pode ver mais informações sobre sua conta, além de editar seu perfil, visualizar os dispositivos conectados à sua conta ou sair da plataforma.'
placement='leftTop'
>
<Avatar
className='cursor-pointer'
size="large"
icon={<UserOutlined />}
src={user.image}
/>
</Tooltip>
</Dropdown>
)

Answer 1

所以过了一段时间，我在其他类似于这个问题的stackoverflow问题的帮助下找到了答案，所以首先我使用了工具提示的setState

const [showTooltip, setShowTooltip] = useState(false)

之后，我只是将下拉菜单更改为onVisibleChange，执行setShowTooltip为false函数，使工具提示消失，并使工具提示仍然显示，将可见状态设置为"showToolTip"；

return (
<Dropdown key='dropdown1' overlay={menu} trigger={['click']} placement="bottomLeft" onVisibleChange={() => setShowTooltip(false)}>
<Tooltip
title='Aqui você pode ver mais informações sobre sua conta, além de editar seu perfil, visualizar os dispositivos conectados à sua conta ou sair da plataforma.'
placement='leftTop'
visible={showTooltip}
onVisibleChange={setShowTooltip}
>
<Avatar className='cursor-pointer' size="large" icon={<UserOutlined />} src={user.image} />
</Tooltip>