Angular15+AngularMaterial14：点击mat-icon显示Tooltip的实现方法

你只需要给mat-icon添加matTooltipTrigger="click"属性，就能把Tooltip的触发逻辑从鼠标悬停改成点击。

修改后的完整代码 #

<p class="text-primary inactive-label">
    <mat-icon [ngStyle]="{'color':'red'}" 
              [matTooltip]="userTitle" 
              matTooltipPosition="above" 
              matTooltipShowDelay="500"
              matTooltipTrigger="click">no_users</mat-icon> 
    <span class="deactivation-title">User Deactivated on 1st April 2023</span>
</p>

补充说明 #

• 设置后点击图标会切换Tooltip的显示状态：第一次点击弹出，再次点击收起。
• 点击页面其他区域时Tooltip会自动隐藏，这是默认行为，不需要额外配置。
• 你的Angular Material 14版本完全兼容这个属性，直接使用即可。

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