WordPress使用Bootstrap4.5在tooltip中插入HTML图片导致页面错乱如何解决

问题根源 #

你直接将完整的HTML标签写在title属性内，属性值的引号与内部HTML的符号产生冲突，浏览器解析DOM时会提前闭合title乃至a标签，直接打乱后续的DOM结构，这就是Item 2被错误识别到Item 1 tooltip内的原因。

可行解决方案 #

方案1：转义title属性内的特殊字符（快速修复）

将title属性内的HTML特殊字符替换为HTML实体，避免浏览器将属性内的<识别为HTML标签的开头。
修改后的HTML代码如下：

<li><a href="/jeux/tr1/solution/item1/" data-toggle="tooltip" title="&lt;img src='/img/jeux/tr1/solution/001.png' alt=''&gt;">Item 1</a></li>
<li><a href="/jeux/tr1/solution/item2/">Item 2</a></li>
<li><a href="/jeux/tr1/solution/item3/">Item 3</a></li>

方案2：自定义属性存储内容+JS动态生成（更推荐，避免转义麻烦）

如果后续需要频繁修改tooltip内容，或者担心WordPress编辑器自动转义代码，可以不用在title属性里写HTML，改用自定义属性存图片路径，初始化tooltip时动态生成内容：

1. 调整HTML代码：

<li><a href="/jeux/tr1/solution/item1/" data-toggle="tooltip" data-tooltip-img="/img/jeux/tr1/solution/001.png">Item 1</a></li>
<li><a href="/jeux/tr1/solution/item2/">Item 2</a></li>
<li><a href="/jeux/tr1/solution/item3/">Item 3</a></li>

2. 调整初始化tooltip的JS代码：

$(function () {
    $('[data-toggle="tooltip"]').tooltip({
        html: true,
        title: function() {
            const imgSrc = $(this).attr('data-tooltip-img');
            return `<img src="${imgSrc}" alt="">`;
        }
    })
})

额外注意 #

如果是在WordPress可视化编辑器内添加代码，请使用「自定义HTML」区块录入上述代码，不要在可视化编辑模式下修改，避免编辑器自动转义特殊字符导致代码失效。

内容的提问来源于stack exchange，提问作者SlyRaider