Repository navigation
<img> inside HTML tooltip is only displayed every other hover. #33124
Description
Activity
I investigated some more, and it appears to have to do with sanitization. When I initialize the tooltips with
sanitizeset tofalse, it does not happen:new bootstrap.Tooltip(element, { sanitize: false }) // This fixes it.I figured out what's wrong. This commit switched from using the
matchmethod on strings to thetestmethod of theSAFE_URL_PATTERNregex.Well, the
matchandtestmethods behave differently. The problem is theg(global) modifier. See the example here to see that thetestmethod returnstrue, thenfalsewhen 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
gmodifier (which, btw is not present on theDATA_URL_PATTERNregex, 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.
Reacted by Microanswer我也遇到相同的问题，看了你这波操作属实流弊，所以我就直接借用了。
I had the same issues, thanks your idea.I opened an issue over at the eslint unicorn plugin so that the rule that introduced this bug can get fixed.
Reacted by XhmikosR
Reproduction:
https://jsfiddle.net/3k4cL51w/
Steps:
The
Testbutton has a tooltip withdata-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.