Bootstrap Vue Tooltip文本颜色修改：将指定提示文本改为红色

方法1：内联样式直接控制 #

Bootstrap Vue的Tooltip支持传入HTML内容，只需给目标文本添加内联样式，同时启用Tooltip的HTML模式（添加.html修饰符）：

<template>
  <!-- 给v-b-tooltip添加.html修饰符，允许解析HTML内容 -->
  <b-button v-b-tooltip.html="tooltipContent">悬停查看提示</b-button>
</template>

<script>
export default {
  data() {
    return {
      tooltipContent: `常规提示说明，<span style="color: red; font-weight: bold;">夜间（00:00 – 06:00）发起的付款</span>将执行特殊处理逻辑`
    }
  }
}
</script>

方法2：自定义CSS类复用样式 #

如果需要在多个Tooltip中复用红色文本样式，可定义全局或局部CSS类：

/* 在全局样式文件（如styles.css）或组件的<style>标签中添加 */
.tooltip-highlight-red {
  color: red !important;
  font-weight: bold;
}

然后在Tooltip内容中引用该类：

<template>
  <b-button v-b-tooltip.html="tooltipContent">悬停查看提示</b-button>
</template>

<script>
export default {
  data() {
    return {
      tooltipContent: `常规提示说明，<span class="tooltip-highlight-red">夜间（00:00 – 06:00）发起的付款</span>将执行特殊处理逻辑`
    }
  }
}
</script>

关键注意事项 #

• 必须启用Tooltip的HTML模式（.html修饰符），否则HTML标签会被转义为纯文本，样式不生效。
• 如果使用全局CSS类，注意添加!important覆盖Bootstrap Tooltip的默认文本样式优先级。

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