[BUG] : When ' (single quote) is used any where in the text, the tooltip doesn't open

[parthee11]

Bug description
When ' (single quote) is used any where in the text, the tooltip doesn't open.

Version of Package
v5.21.5

To Reproduce

• Make sure there is at least one ' added to the content you passing, eg: Animal's Park to reproduce the issue

Expected behavior

• This should work similar to other text content

Screenshots

• Where we have the text Hgjvkwlq;'Dlk.. and Erfdgbqqwerfgjghvkjk'ljhgfchijhgfhchjjilghcjgchvh, the tooltip is not open

[gabrieljablonski]

Cannot reproduce this neither on v5.21.5 nor on v5.26.3 (latest version as of writing this).

https://stackblitz.com/edit/vitejs-vite-jblnec?file=src%2FApp.tsx&terminal=dev

What's most likely happening is that you're using the content as the id for the tooltip, which is not allowed on the HTML id attribute. Look at the console and you should see a warning message prefixed with [react-tooltip]. See #1150 for more details.

If that's the case, you should consider not using a tooltip for each one of your items. See the Dynamically generated anchor elements section on the docs for why you shouldn't do it.

Please confirm if it's indeed an issue with the id, and we will also add this to the troubleshooting page.

[parthee11]

Sure @gabrieljablonski , what you have explained makes sense. Will check once

[gabrieljablonski]

Although you should still update your application to use less tooltip elements, as suggested above, there is indeed a bug regarding using ' in the id (which is allowed according to MDN docs, only whitespace characters are not allowed).

This is due to how we build the CSS selector string:

document.querySelectorAll(`[data-tooltip-id='${id}']`)

We should escape single quotes from id, so they're allowed to be used.

Will be fixed soon.

[gabrieljablonski]

Fixed on react-tooltip@5.26.4