如何为禁用状态的按钮添加Tooltip？启用时不显示

安全阿岳

2026-7-27

实现按钮禁用时显示Tooltip的方案

针对你的需求，这里提供两种可行的实现方式，根据项目技术栈选择即可：

方案一：原生HTML Title属性（无需额外UI库）

直接通过动态绑定title属性，仅在按钮禁用时设置提示文本，启用时清空：

<input
  :disabled="isDisabled"
  :title="isDisabled ? '请填写姓名和姓氏' : ''"
  value="Test"
  class="btn btn-success btn-block"
  @click="test()"
/>

原理

当isDisabled为true（按钮禁用）时，title赋值为提示内容，鼠标悬停时会显示原生Tooltip
当isDisabled为false（按钮启用）时，title设为空字符串，不会触发Tooltip显示

方案二：Bootstrap Tooltip组件（适配你的Bootstrap按钮类）

如果项目使用了Bootstrap的Tooltip组件，可通过动态控制Tooltip的初始化与销毁来实现：

1. 修改按钮代码

<input
  ref="submitBtn"
  :disabled="isDisabled"
  value="Test"
  class="btn btn-success btn-block"
  @click="test()"
/>

2. 在Vue组件中处理Tooltip逻辑

export default {
  data() {
    return {
      name: '',
      surname: ''
    }
  },
  computed: {
    isDisabled() {
      return !this.name || !this.surname;
    }
  },
  mounted() {
    this.updateTooltip()
  },
  watch: {
    isDisabled() {
      this.updateTooltip()
    }
  },
  methods: {
    updateTooltip() {
      const btn = this.$refs.submitBtn
      const tooltipInstance = bootstrap.Tooltip.getInstance(btn)
      
      if (this.isDisabled) {
        if (!tooltipInstance) {
          new bootstrap.Tooltip(btn, {
            title: '请填写姓名和姓氏',
            trigger: 'hover'
          })
        }
      } else {
        tooltipInstance?.dispose()
      }
    },
    test() {
      // 你的点击逻辑
    }
  }
}