[BUG] The tooltip doesn't remain open, when target changes.

[TomYeoman]

---

Bug description
When I create a new target for the tooltip, it's no longer automatically opened.

Version of Package
^5.16.1

To Reproduce

1. Find an element in the page that is currently selected, and assign a random / static ID

const [tooltipId, setTooltipId] = useState("");

const anEventHandler= () => {
  
  const oldTargetElement = ....
  currentElement.removeAttribute("data-tooltip-id");
  currentElement.removeAttribute("data-tooltip-content");
  
  const newTargetElement = document.getElementById(`${targetClass}`);
  newTargetElement.setAttribute("data-tooltip-id", dataTooltipId);
  newTargetElement.setAttribute("data-tooltip-content", "Hi der");
  
  // This is a hook, and will trigger re-render
  setTooltipId(tooltipId);
}

2. Render as normal

// In the render
<>
  <ReactTooltip id={tooltipId} place="bottom" isOpen={true} />
</>

3. Repeat (1) as many times as you like, each time after initial render, you will have to hover over the element in order for the tooltip to open

Expected behavior

The current behavior is the tooltip only opens for the first element assigned the data attributes. For initial renders after that point I have to hover over the tooltip manually to open it again, I would like it to remain open (as per my code).

I have tried 2 approaches to fix this;

1. Using a random ID when assigning tooltip to new element - This results in the OLD element having the tooltip on hover
2. Using a static ID when assigning tooltip to new element - This results in the tooltip pointing to new element

In both cases however, I must still hover over the target element to open it.

Desktop (please complete the following information if possible or delete this section):
-Chrome, Windows 11

[gabrieljablonski]

Changing data-tooltip-id on an element leads to unexpected behavior, so it currently not supported, and we have no plans in the near future to fix that.

This is the first time I've seen someone trying to dynamically change the active anchor element without interacting with it, so I'm not sure it'll work out of the box.

I'll do some testing later and let you know if I have any suggestions.

As a workaround until we figure that out, if your application won't have many target elements rendered at the same time (anything under 25 should be fine), you can try rendering a new dedicated tooltip component alongside each one.

[gabrieljablonski]

Hopefully this serves as inspiration: https://stackblitz.com/edit/stackblitz-starters-fcesse?file=src%2FApp.tsx

The key takeaway is the usage of the key prop on the tooltip component. As I've said, changing data-tooltip-id on an anchor element does not guarantee the tooltip will respect those changes. Using key forces a tooltip re-render, which might help in some situations.

I won't guarantee you won't run into some issues, but maybe this is good enough for you.

Feel free to reopen/open a new issue if you run into something else.