<img> inside HTML tooltip is only displayed every other hover.

[nikonthethird]

Reproduction:

https://jsfiddle.net/3k4cL51w/

Steps:

The Test button has a tooltip with data-bs-html="true" on it and an <img> tag in the title. When you hover your mouse multiple times over the button, you will see that the the image in the tooltip will only be shown every other hover.

I tested this on Ubuntu 20.04 on Firefox and Chromium.
It worked on 5.0 beta 1, the issue only started appearing after I upgraded to 5.0 beta 2.

[nikonthethird]

I investigated some more, and it appears to have to do with sanitization. When I initialize the tooltips with sanitize set to false, it does not happen:

new bootstrap.Tooltip(element, { sanitize: false }) // This fixes it.

[nikonthethird]

I figured out what's wrong. This commit switched from using the match method on strings to the test method of the SAFE_URL_PATTERN regex.

Well, the match and test methods behave differently. The problem is the g (global) modifier. See the example here to see that the test method returns true, then false when presented with the same string:

// This is the regex that's causing the problem.
const SAFE_URL_PATTERN = /^(?:(?:https?|mailto|ftp|tel|file):|[^#&/:?]*(?:[#/?]|$))/gi

To fix the issue, simply remove the g modifier (which, btw is not present on the DATA_URL_PATTERN regex, so no issue there). Furthermore, the regex is faulty, because slashes have to be escaped with a backslash (see here).

The correct regex would be:

const SAFE_URL_PATTERN = /^(?:(?:https?|mailto|ftp|tel|file):|[^#&\/:?]*(?:[#\/?]|$))/i

And that fixes the issue on my end and I can leave the sanitizer turned on. I'll make a pull request if that's ok.

[Microanswer]

我也遇到相同的问题，看了你这波操作属实流弊，所以我就直接借用了。
I had the same issues, thanks your idea.

[nikonthethird]

I opened an issue over at the eslint unicorn plugin so that the rule that introduced this bug can get fixed.