Question 296292 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – Antd Tooltip gets stuck when component moves onclick

I have a button with an Antd tooltip, like this:

<Tooltip title="Some text">
  <button onClick={openNotes}><Icon icon="notes" /></button>
</Tooltip>

When you click the button, the openNotes function makes some other component appear on screen so it moves the Tooltip like 200px to the left.

This makes the tooltip get stuck unless you hover off it, then hover on, then off again.

Is there any solution to this? I tried setting the mouseLeave delay to 0 but it still happens.

Tags:

2

Answers


  1. 0

    There are 2 tooltip props that might help your problem, I am not sure what you are trying to achieve, but open prop might help as you can control with a state the visibilty of the tooltip. Moreover there is getPopupContainer prop that will make the tool ti relative to your trigger and not absolute for the whole page, this might work as well

    const getPopupContainer = (parentNode) => parentNode.parentElement

    just be sure that the css parent container has position: relative.
    Hope this helps!

    Login or Signup to reply.
  2. 0

    Maybe you can use a setTimeout in openNotes to delay showing the component.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search