Hide tooltip on mouse click

Question

Working with antd design, and the tooltip is conflicting with the dropdown menu. The best solution would be for the tooltip to hide after the user clicks the dropdown menu, thus only focusing on the dropdown, because they are overlapping each other.

The tooltip shows up on hover of the dropdown menu of the user login info, located on the topRight of the screen always

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

So after some time I figured the answer with the help of some other stackoverflow questions similar to this one, so first I used a setState for the tooltip

  const [showTooltip, setShowTooltip] = useState(false)

After that I just changed the dropdown menu to onVisibleChange execute the setShowTooltip to false function, to make the tooltip dissapear, and to make the tooltip still showed up, set a visible state to '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>