Salesforce LWC中如何为禁用的标准lightning按钮添加悬浮提示

问题根因 #

这是浏览器的原生行为：所有设置了disabled属性的交互元素，不会触发任何鼠标相关事件，因此绑定在按钮自身的title属性无法被触发展示。

方案1：外层包裹普通容器，将title属性绑定到容器上 #

这是改造成本最低的实现方式，利用未禁用的外层容器响应鼠标悬浮事件触发提示，不需要修改JS逻辑：

<template if:true={disableButton}>
  <!-- 外层容器设为行内块避免占满整行，title属性移到容器上 -->
  <span class="slds-align-middle" title="button is disabled" style="display: inline-block;">
    <lightning-button icon-name="utility:custom_apps" label="button" icon-position="left"
      onClick={doSomething} disabled></lightning-button>
  </span>
</template>

方案2：使用Salesforce原生lightning-tooltip组件 #

符合SLDS设计规范，自定义程度更高，支持配置提示位置、主题样式等：

<template if:true={disableButton}>
  <lightning-button 
    icon-name="utility:custom_apps" 
    label="button" 
    icon-position="left"
    onClick={doSomething} 
    disabled
    data-id="disabled-button"
  >
  </lightning-button>
  <lightning-tooltip 
    for="disabled-button" 
    value="button is disabled"
    placement="top">
  </lightning-tooltip>
</template>

注意：tooltip的for属性要和按钮的data-id属性值保持一致即可自动关联，禁用状态下也可以正常触发悬浮提示。

额外优化建议 #

你当前的实现是用template if:true单独渲染禁用状态的按钮，其实可以简化为单个按钮绑定disabled属性，减少重复代码：

<lightning-button 
  icon-name="utility:custom_apps" 
  label="button" 
  icon-position="left"
  onClick={doSomething} 
  disabled={disableButton}
  data-id="operate-button"
>
</lightning-button>
<lightning-tooltip 
  for="operate-button" 
  value={buttonTipText}
  placement="top">
</lightning-tooltip>

JS里同时控制禁用状态和提示文本即可：

if (conditionNotSatisfied) {
  this.disableButton = true;
  this.buttonTipText = 'button is disabled';
} else {
  this.disableButton = false;
  this.buttonTipText = 'click to operate';
}

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