Vue 3与Bootstrap 5动态更新Tooltip文本的实战指南

<script>
import { Tooltip } from "bootstrap";

export default {
  mounted() {
    // 在组件挂载后初始化所有带有 .tooltip 类的元素
    Array.from(document.querySelectorAll(".tooltip")).forEach(
      (tooltipNode) => new Tooltip(tooltipNode)
    );
  }
}
</script>

<template>
  <div>
    <button class="btn btn-success col-12" @click="changeTooltip()">点击改变Tooltip</button>
    <input class="form-control tooltip col-12" data-bs-placement="bottom" :title="tooltipText" />
  </div>
</template>

<script>
export default {
  data() {
    return { // 注意：data属性应返回一个对象
      tooltipText: "初始Tooltip文本",
    };
  },  

  methods: {
    changeTooltip() {
      this.tooltipText = "新的Tooltip文本"; // Vue数据已更新
      // 但Tooltip显示内容未变
    }
  }
}
</script>

<template>
  <div>
    <button class="btn btn-success col-12" @click="changeTooltip()">点击改变Tooltip</button>
    <!-- Tooltip元素，保持 .tooltip 类以便App.vue初始化 -->
    <input ref="tooltipInput" class="form-control tooltip col-12" data-bs-placement="bottom" :title="tooltipText" />
  </div>
</template>

<script>
// 如果Tooltip实例是在当前组件内创建的，需要引入Tooltip类
// import { Tooltip } from "bootstrap"; 

export default {
  data() {
    return {
      tooltipText: "初始Tooltip文本",
    };
  },  

  methods: {
    changeTooltip() {
      const updatedTooltipText = "新的Tooltip文本";
      this.tooltipText = updatedTooltipText; // 更新Vue的数据绑定

      // 获取Tooltip元素并直接修改其 data-bs-original-title 属性
      // 使用 ref 避免直接操作 DOM，更符合Vue最佳实践
      const tooltipNode = this.$refs.tooltipInput; 
      if (tooltipNode) {
        tooltipNode.setAttribute('data-bs-original-title', updatedTooltipText);

        // 如果Tooltip已经显示，可能需要手动更新或隐藏再显示
        // 但通常情况下，下次显示时会读取新的 original-title
        // 如果需要立即更新已显示的Tooltip，可以考虑销毁并重建，或使用其 update 方法（如果Bootstrap提供）
        // 对于Bootstrap 5，通常设置 data-bs-original-title 即可，下次hover时会自动生效。
      }
    }
  }
}
</script>

<template>
  <div id="app">
    <Component />
  </div>
</template>

<script>
import { Tooltip } from "bootstrap";
import Component from './components/Component.vue'; // 引入你的组件

export default {
  components: {
    Component,
  },
  mounted() {
    // 确保在DOM元素可用后初始化Tooltip
    // 可以在这里初始化所有Tooltip，或在Component.vue的mounted中单独初始化
    Array.from(document.querySelectorAll(".tooltip")).forEach(
      (tooltipNode) => new Tooltip(tooltipNode)
    );
  }
}
</script>

<template>
  <div class="p-3">
    <button class="btn btn-success col-12 mb-3" @click="changeTooltip()">点击改变Tooltip</button>
    <input ref="tooltipInput" class="form-control tooltip col-12" data-bs-placement="bottom" :title="tooltipText" placeholder="鼠标悬停查看Tooltip" />
    <p class="mt-3">当前Tooltip文本（Vue内部状态）：{{ tooltipText }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tooltipText: "初始Tooltip文本",
    };
  },  

  methods: {
    changeTooltip() {
      const updatedTooltipText = "新的Tooltip文本已更新！";
      this.tooltipText = updatedTooltipText; 

      const tooltipNode = this.$refs.tooltipInput; 
      if (tooltipNode) {
        tooltipNode.setAttribute('data-bs-original-title', updatedTooltipText);
        // 如果需要，也可以手动更新Tooltip实例的配置，但这通常不是必需的
        // const tooltipInstance = Tooltip.getInstance(tooltipNode);
        // if (tooltipInstance) {
        //   tooltipInstance.setContent({ '.tooltip-inner': updatedTooltipText }); // Bootstrap 5.2+ 的 setContent 方法
        // }
      }
    }
  },
  // 如果Tooltip实例是在当前组件内部创建的，可以在这里初始化
  // mounted() {
  //   new Tooltip(this.$refs.tooltipInput);
  // }
}
</script>