Dynamic tooltip content not working

[viveleroi]

I have an input element that needs to show a tooltip when it's an error state.

So I have <input data-tooltip-content={error?.message} ... /> and in our application root I have:

<Tooltip anchorSelect='[data-tooltip-content]' className={styles.tooltip} noArrow place='bottom-start' />

Tooltips work fine on all other components where the content attribute is given content to start, but it doesn't work when the content is dynamic. Am I doing anything wrong or is this a limitation?

It looks like it works if I use {error?.message ?? ''} which is odd, but that's good enough for me. Seems like it's a bug if the attribute is undefined and then string.

[gabrieljablonski]

The issue is that you're using "[data-tooltip-content]" as the selector. If there is no error (more specifically, if data-tooltip-content={undefined}), the tooltip won't detect it as a valid anchor, so any changes made to it won't be detected.

This is not a bug, since the alternative would be to watch for changes on all elements on the page (instead of just detected anchors), which is something we intentionally avoid.

I recommend you use data-tooltip-id explicitly, since you might run into other issues selecting the anchors like this.

[viveleroi]

If that's what you recommend I'll switch to the data-tooltip-id attribute. We're only going to have one tooltips "system" so I figured I could avoid having to add that to every single component that will use tooltips, and our application will use them a lot. But it's pretty trivial to add in so if it's going to avoid potential issues, I'll do that.

[gabrieljablonski]

Yep, it's a somewhat important prop, since it's the default way we track the anchors.

You could keep using just anchorSelect, but you'd need a more robust selector, one that would always select the target anchors. Since that can be annoying to do across different types of elements (buttons, divs, spans), using data-tooltip-id ends up being the cleanest way to do it.