Style tooltip from data attributes

[fatton139]

Wondering if it's possible to style the tooltip directly from the element that takes the data-* attributes. I understand there is a render method of the <Tooltip> component but that's only for the inner content, I'm looking to style the tooltip wrapper directly (specifically the z-index).

While we can render many <Tooltip> with different/dynamic styles we run into performance issues described here: https://react-tooltip.com/docs/troubleshooting#bad-performance

Basically, looking to go from this:

<a className="my-anchor-element" data-tooltip-id="1">◕‿‿◕</a>
<Tooltip id="1" style={style1} />
<a className="my-anchor-element" data-tooltip-id="2">◕‿‿◕</a>
<Tooltip id="2" style={style2}/>
<a className="my-anchor-element" data-tooltip-id="3">◕‿‿◕</a>
<Tooltip id="3" style={style3}/>

to something like this:

<a className="my-anchor-element" data-tooltip-id="1" style={style1}>◕‿‿◕</a>
<a className="my-anchor-element" data-tooltip-id="1" style={style2}>◕‿‿◕</a>
<a className="my-anchor-element" data-tooltip-id="1" style={style3}>◕‿‿◕</a>
<Tooltip id="1"/>

Thanks!

[gabrieljablonski]

Hi @fatton139.

I'm not sure what exactly you're trying to accomplish with the z-index, so this might not work exactly as you expect, but have a look at this example.

https://codesandbox.io/p/sandbox/sparkling-paper-4v4rm3?file=%2Fsrc%2FApp.tsx%3A15%2C88

You can use the render prop as a sort of "callback" to know when the active anchor element changed, and switch the className for the tooltip.

data-tooltip-class-name is just a placeholder name, it can be anything (except existing HTML attributes). Though I recommend keeping the data-tooltip-* prefix so you don't lose track of it.

[gabrieljablonski]

I had just tested this and it stopped working due to setting the state from inside the render method. I'll try to figure out a workaround and update the example.

[gabrieljablonski]

I tried a few different methods, including the one from the previous comment, and all of them almost work, but not quite. One of the issues is that internally the tooltip "ignores" changes to the className prop, and forcing a re-render leads to other issues.

You're welcome to open an issue (and maybe even submit a PR if you'd like) requesting for a new attribute data-tooltip-class-name to be included. We shouldn't take too long to get to it.

---

Alternatively, although you're correct to follow the suggestion in the troubleshooting page, depending on the number of different tooltips your application requires, it may have no significant impact on your performance to have multiple instances of it. Something like 10-20 might still be fine, though you'll have to test it.

[fatton139]

Hi @gabrieljablonski thanks for the response.

We have ~2000 tooltips operating on various z-index layers. The data-tooltip-class-name attribute may not work as our styles will be dynamic. I was thinking data-tooltip-style but just realised data-* attributes have to be strings.

Though your demo has given me an idea; copying the style on open: https://codesandbox.io/p/sandbox/angry-cloud-g4v47r?file=%2Fsrc%2FApp.tsx%3A22%2C8

I assume you wouldn't want a PR for this hack, so happy to resolve this!

[gabrieljablonski]

Yeah, I considered using setIsOpen but it felt too hacky of a solution. But if it works, it works.

We're already making plans for some improvements for a future v6 version, so we'll probably consider something similar to a data-tooltip-class-name attribute. Thanks for the idea!

[gabrieljablonski]

Though your demo has given me an idea; copying the style on open

Btw, you don't have to copy the style, since that might limit your design choices a little bit, and you might want different styles between the anchor element and the tooltip. Consider just using some data-* attributes, even if it means you have to set them as strings.

[fatton139]

We're already making plans for some improvements for a future v6 version, so we'll probably consider something similar to a data-tooltip-class-name attribute. Thanks for the idea!

I can think of a few use cases for this (unrelated to this discussion), let me submit a PR for it.

Consider just using some data-* attributes, even if it means you have to set them as strings.

My only real use case is for z indexes so I'm debating whether it's worth doing something like data-style-z-index={1} then parsing the string as a number on the other side. I'll give it some thought tomorrow, thanks!

[gabrieljablonski]

I can think of a few use cases for this (unrelated to this discussion), let me submit a PR for it.

Yep, definitely can also think of a few. If you have the time, we'd really appreciate it. We'll get to it eventually either way.

My only real use case is for z indexes so I'm debating whether it's worth doing something like data-style-z-index={1} then parsing the string as a number on the other side.

You don't have to worry about parsing. Most CSS attributes, such as style.zIndex, don't differentiate numbers and strings (e.g. zIndex: 1 and zIndex: '1' do the same thing). Try it out.

[gabrieljablonski]

data-tooltip-class-name attribute available on [email protected].

Thanks @fatton139 for the contribution!