Bootstrap Tooltip中SVG图标无法显示问题求助

问题核心 #

你通过HTML属性配置、JS手动初始化两种方式尝试在Bootstrap Tooltip中插入SVG图标，但始终仅显示文本，图标被忽略。本质是SVG的颜色继承或布局样式和Tooltip默认样式冲突，导致图标不可见。

具体解决方案 #

1. 强制指定SVG填充色，避免依赖currentColor

currentColor会继承Tooltip文本的颜色，但如果Tooltip样式优先级或继承链出现问题，会导致SVG颜色与背景色一致（比如深色背景下SVG也继承深色），看起来像是被隐藏。直接给SVG设置明确的填充色：

修改HTML方式的title属性中的SVG：

<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-exclamation-triangle d-inline-block align-middle' viewBox='0 0 16 16'>
  <path d='M7.938 2.016A.13.13 0 0 1 8.002 2a.13.13 0 0 1 .063.016.15.15 0 0 1 .054.057l6.857 11.667c.036.06.035.124.002.183a.2.2 0 0 1-.054.06.1.1 0 0 1-.066.017H1.146a.1.1 0 0 1-.066-.017.2.2 0 0 1-.054-.06.18.18 0 0 1 .002-.183L7.884 2.073a.15.15 0 0 1 .054-.057m1.044-.45a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767z'/>
  <path d='M7.002 12a1 1 0 1 1 2 0 1 1 0 0 1-2 0M7.1 5.995a.905.905 0 1 1 1.8 0l-.35 3.507a.552.552 0 0 1-1.1 0z'/>
</svg> Some tooltip text!

2. 给SVG添加布局类，确保正确显示

添加d-inline-block align-middle类，解决SVG默认布局导致的显示异常：

• d-inline-block：将SVG设为行内块级元素，确保尺寸生效
• align-middle：让SVG与文本垂直居中对齐

3. JS初始化方式的对应修改

同样调整SVG的填充色和布局类：

new bootstrap.Tooltip(passwordInput, {
    placement: "top",
    html: true,
    title: '<div><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="white" class="bi bi-exclamation-triangle d-inline-block align-middle" viewBox="0 0 16 16">' +
                '<path d="M7.938 2.016A.13.13 0 0 1 8.002 2a.13.13 0 0 1 .063.016.15.15 0 0 1 .054.057l6.857 11.667c.036.06.035.124.002.183a.2.2 0 0 1-.054.06.1.1 0 0 1-.066.017H1.146a.1.1 0 0 1-.066-.017.2.2 0 0 1-.054-.06.18.18 0 0 1 .002-.183L7.884 2.073a.15.15 0 0 1 .054-.057m1.044-.45a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767z"/>' +
                '<path d="M7.002 12a1 1 0 1 1 2 0 1 1 0 0 1-2 0M7.1 5.995a.905.905 0 1 1 1.8 0l-.35 3.507a.552.552 0 0 1-1.1 0z"/>' +
            '</svg>'+ 
        " " +
        translationUtils.getTranslation("tCapsLockIsOn") + "</div>",
    id: tooltipId,
    trigger: "manual"
}).show();

验证步骤 #

• 打开浏览器控制台，检查是否有SVG加载或解析错误
• 右键检查Tooltip元素，确认SVG是否存在于DOM中：若存在则是样式问题（颜色、尺寸、display）；若不存在则是HTML未被正确解析，需确认data-bs-html="true"（HTML方式）或html: true（JS方式）已正确设置

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