Vue Bootstrap Tooltip动态渲染HTML失效问题排查与解决

这个tooltip失效的问题我之前也碰到过，核心原因是Vue不会解析v-html插入内容里的指令。你通过v-html渲染的<span>里的v-b-tooltip是作为纯HTML字符串插入的，Vue编译阶段根本没识别到这个指令，自然不会触发tooltip的初始化逻辑。

下面给你两种可行的修复方案，优先推荐第一种：

方案一：优化数据结构（推荐） #

如果后端可以调整返回的数据格式，最好不要让后端返回带Vue指令的HTML，而是把tooltip的标题单独作为一个字段返回。这样前端可以直接在模板里使用v-b-tooltip，保证指令能被正常解析，还能避免v-html带来的XSS风险。

调整后的示例数据： #

{ 
  "MenuID": "1", 
  "Name": "Help", 
  "TooltipTitle": "Self Help Training", 
  "Url": "example.com" 
}

修改后的HTML模板： #

<ul class="list-group list-group-flush">
  <li class="list-group-item list-group-item-action" v-for="(link, i) in links" :key="i">
    <a :href="link.Url">
      <span v-b-tooltip.hover :title="link.TooltipTitle">{{ link.Name }}</span>
    </a>
  </li>
</ul>

方案二：手动初始化Tooltip（无法修改后端数据时用） #

如果后端必须返回带v-b-tooltip的HTML字符串，那我们需要在v-html插入完成后，手动调用Bootstrap Vue的Tooltip初始化方法，让Vue处理这些动态插入的指令。

修改后的模板与脚本： #

<template>
  <ul class="list-group list-group-flush" ref="linkList">
    <li class="list-group-item list-group-item-action" v-for="(link, i) in links" :key="i">
      <a :href="link.Url" v-html="link.Name"></a>
    </li>
  </ul>
</template>

<script>
export default {
  data() {
    return {
      links: []
    }
  },
  watch: {
    links: {
      deep: true,
      handler() {
        // 等待DOM更新完成后初始化tooltip
        this.$nextTick(() => {
          this.$bvTooltip.init(this.$refs.linkList)
        })
      }
    }
  },
  // 异步加载数据后也需要触发初始化
  async mounted() {
    // 模拟异步获取数据的过程
    this.links = await this.fetchMenuLinks()
    this.$nextTick(() => {
      this.$bvTooltip.init(this.$refs.linkList)
    })
  }
}
</script>

这里通过$nextTick确保DOM已经更新完成，再调用$bvTooltip.init()方法传入容器元素，让Bootstrap Vue重新解析里面的tooltip指令。

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