Angular 5中MatToolTip与图标结合使用失效问题求助

嘿，这个问题我之前踩过坑！咱们一步步拆解：

核心原因有两个： #

1. 指令名称拼写错误
   你在div上写的是matToolTip（大写的T），但Angular Material的Tooltip指令正确名称是matTooltip（小写的t）——Angular的指令/组件名称是严格区分大小写的，拼写错了的话，指令根本不会被识别，自然没效果！

2. 普通元素默认不可交互
   <button>是原生的可交互元素，浏览器默认会处理它的鼠标悬停、点击等事件，所以Tooltip能正常触发。但<div>或<span>默认属于非交互元素，即使你加了cursor: pointer，浏览器也不会自动给它绑定完整的鼠标事件监听，Tooltip的触发逻辑就无法生效。

修复后的代码示例 #

把拼写改对，再给div添加tabindex="0"（让元素可聚焦，成为可交互元素），还可以加上role="button"提升无障碍访问性：

<div matTooltip="myMessage" tabindex="0" role="button">
  <i style="line-height: 0px; font-size: 25px; cursor: pointer;" (click)="fn()" class="material-icons">delete</i>
</div>

额外说明 #

• tabindex="0"表示元素可以通过键盘Tab键聚焦，同时让浏览器把它当作可交互元素处理鼠标事件；
• role="button"告诉屏幕阅读器这个元素的作用和按钮一样，是无障碍开发的最佳实践；
• 如果不想让元素被键盘聚焦，也可以用tabindex="-1"，但这样只能通过鼠标触发Tooltip，键盘用户无法访问。

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