Vue Bootstrap如何仅在b-button禁用时显示b-tooltip

b-tooltip默认不会自动感知绑定目标的禁用状态，只要目标元素存在、匹配触发条件就会弹出；另外浏览器默认会拦截disabled状态表单元素的所有鼠标事件，直接把tooltip绑定在禁用按钮上，反而会出现禁用时弹不出提示的问题。

按如下方式调整代码即可实现需求：

• 用添加了d-inline-block类的span包裹需要切换禁用状态的b-button，将tooltip绑定到这个外层span上。外层span尺寸和内部按钮完全对齐，既解决了禁用元素不响应鼠标事件的问题，也不会出现悬浮空白区域误触发tooltip的情况
• 给b-tooltip绑定disabled属性，和按钮的禁用状态做反向联动：按钮可用时禁用tooltip，按钮禁用时启用tooltip

修正后的完整代码：

<form ref="form" @click="handleDelete">
    <span id="tooltip-target-1" class="d-inline-block">
        <b-button 
            :disabled="userRole !== 'admin'" 
            variant="danger"
        >
            Admin Delete Agency
        </b-button>
    </span>
    <b-tooltip 
        target="tooltip-target-1" 
        triggers="hover"
        :disabled="userRole === 'admin'"
    >
      You cannot delete an agency with children. Reassign child agencies to continue deletion.
    </b-tooltip>
</form>

也可以用v-if直接控制tooltip的渲染，逻辑设置为仅当按钮处于禁用状态时才渲染tooltip组件，这种写法同样能实现效果，只是tooltip切换时没有默认过渡动画，体验稍差。不要尝试给按钮加id:disabled这类自定义属性做状态联动，组件不会识别这类无约定的自定义属性同步状态。

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