Angular中如何基于条件控制matTooltip提示的显示与隐藏

你可以直接使用Angular Material 原生提供的matTooltipDisabled属性来控制Tooltip的显隐，不需要额外自定义事件或指令，和你现有代码的适配成本极低，完整实现代码如下：

<div 
  matTooltip="{{cellData[id]}}"
  [matTooltipDisabled]="cellData[id].length <= 120"
  class="{{cssCell}}"
>
  {{ cellData[id].length > 120 ? (cellData[id] | slice:0:120) + '..' : cellData[id] }}
</div>

逻辑说明 #

• matTooltipDisabled是Angular Material Tooltip 内置的输入属性，属性值为true时会完全禁用Tooltip，hover时不会触发显示
• 这里我们绑定的禁用条件为cellData[id].length <= 120，刚好匹配你「仅当文本长度超过120时才显示Tooltip」的需求
• Tooltip内容直接绑定完整的cellData[id]，用户触发Tooltip时可以看到未截断的完整文本，和你现有代码的缩略展示逻辑完全适配

可选优化 #

如果你的业务场景中cellData[id]可能出现空值（null/undefined），可以把长度判断改为可选链写法，避免空值读取length属性抛出报错：

<div 
  matTooltip="{{cellData[id]}}"
  [matTooltipDisabled]="!(cellData[id]?.length > 120)"
  class="{{cssCell}}"
>
  {{ cellData[id]?.length > 120 ? (cellData[id] | slice:0:120) + '..' : cellData[id] }}
</div>

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