Ionic中如何修改图标悬浮提示标题？

• 直接用原生title属性（最简单方案）
  给ion-icon添加title属性就能自定义悬浮显示的文本，完全不影响点击事件：

  <ion-icon name="trash-outline" (click)="onDelete(message)" class="del" title="删除这条消息"></ion-icon>
  

• 自定义CSS悬浮提示（样式可自由调整）
  如果你不满意原生title的样式，可以给图标套个父容器，用CSS实现自定义tooltip，点击事件绑定在父容器上，确保点击有效：

  <span class="tooltip-wrapper" (click)="onDelete(message)">
    <ion-icon name="trash-outline" class="del"></ion-icon>
    <span class="tooltip-text">删除这条消息</span>
  </span>
  

  对应的CSS：

  .tooltip-wrapper {
    position: relative;
    display: inline-block;
    cursor: pointer;
  }
  
  .tooltip-text {
    visibility: hidden;
    width: 120px;
    background-color: #333;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px;
    position: absolute;
    z-index: 1;
    bottom: 125%;
    left: 50%;
    margin-left: -60px;
    opacity: 0;
    transition: opacity 0.3s;
  }
  
  .tooltip-wrapper:hover .tooltip-text {
    visibility: visible;
    opacity: 1;
  }
  

• 使用Ionic官方ion-tooltip组件（适配Ionic生态）
  用Ionic自带的tooltip组件，通过trigger绑定图标ID，既符合框架规范，也不会影响点击：

  <ion-tooltip trigger="delete-icon" content="删除这条消息"></ion-tooltip>
  <ion-icon id="delete-icon" name="trash-outline" (click)="onDelete(message)" class="del"></ion-icon>
  

之前你用pointer-events: none;导致onDelete失效的原因是：这个属性会让元素完全不响应任何鼠标事件，包括点击，所以点击图标时不会触发绑定的函数。上面的几个方案都不会阻断鼠标事件，能同时满足自定义悬浮标题和点击触发函数的需求。

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