Single Tooltip default ID from version 4 to 5

[0stone0]

I'm using React Tooltip v4 in my React application.

A single <ReactTooltip /> is rendered in the index.js and I'm adding multiple Tooltips in deeper components using

<div data-tip={'Fany ToolTip'}>{'Foo Bar'}</div>

---

So when following the Upgrade Guide from V4 to V5, I was supprised to see that the id prop on the Tooltip component is required.

Therefore, I'll need to update all my deep Tooltips to include some data-tooltip-id='tt'.

This is quite some extra work, and since I only use 1 Tooltip component, there is no need for unique ID's.

Is there a way to use a single <Tooltip /> component, with deeper data-tooltip-content without defining a data-tooltip-id?

[gabrieljablonski]

V5 offers two ways of attaching the tooltip to an element. As you've seen, the old data-tip is now data-tooltip-content, but we made the design decision to have the data-tooltip-id attribute also be required. The new alternative way of attaching the tooltip is with the anchorSelect prop.

I strongly suggest taking the time to refactor your code to add the data-tooltip-id attribute to conform with the new API, since it might save you some future headaches if you decide to, for example, add more tooltip components to your application. Whatever editor you're using should help you write a clever find-and-replace without much trouble (don't forget to double check!).

But if you really really don't want to take the time to make sure the full refactoring doesn't break anywhere (no judgement here 😅), just refactor the data-tip to data-tooltip-content and use the anchorSelect prop like in this example:

https://stackblitz.com/edit/stackblitz-starters-yfskzq?file=src%2FApp.tsx

The relevant bit:

<button data-tooltip-content="Tooltip content">Hello world!</button>
<Tooltip anchorSelect="[data-tooltip-content]" />

anchorSelect is used as a CSS selector, so it's very flexible for more niche use cases.

[0stone0]

Wouw, many thanks! Defining the <Tooltip /> as follows seems to be sufficient:

<Tooltip anchorSelect="[data-tooltip-content],[data-tooltip-html]" />

I appreciate your suggestion, guess I'll take some time to add data-tooltip-id to each Tooltip to ensure it won't cause any problems in the feature should I want to add multiple Tooltip components.

Thanks again for the quick response!