如何更改离子图标的标题？答案

【问题标题】：How to change title of an ion-icon?如何更改离子图标的标题？
【发布时间】：2021-06-03 16:26:57
【问题描述】：

我正在尝试更改鼠标悬停时出现的离子图标标题。
例如：
我已经尝试了至少几个小时来找到解决方案。我只是不知道如何通过 css 访问 ion-icon 的标题元素，以便能够将其内容更改为“编辑”而不是“创建”。任何帮助将不胜感激。

【问题讨论】：

【解决方案1】：

您可以尝试使用 CSS 事件阻止来禁用 ion-icon 弹出窗口并将“title”属性设置为父元素。

CSS

ion-icon {
 pointer-events: none;
}

或者您可以使用以下代码创建图标元素作为解决方法并将其设置在按钮上。

const icon = <Icon icon='arrow-right' title={false} />;
return <Button minimal icon={icon} title='Next' />;

详情在这里 - https://github.com/palantir/blueprint/issues/2321

【讨论】：

【解决方案2】：

禁用事件：

ion-icon {
    pointer-events: none;
}

并使用标题属性用 span 标签包裹图标：

<span title="Edit" style="font-size: x-large;">
  <ion-icon name="create"></ion-icon>
</span>

【讨论】：

我必须将line-height: 0 添加到跨度以避免图标对齐问题，因为我的图标小于默认行高。简单的解决方案，谢谢。

【解决方案3】：

Ionic 5 - 只需将其包装在一个 div 中，如下所示：

<div (click)="presentActionsPopover($event, obj)" slot="end" title="Actions" size="small">
      <ion-icon name="ellipsis-vertical-outline" slot="icon-only"></ion-icon>
    </div>

【讨论】：

【解决方案4】：

试试下面的：

<ion-button title="Create Project">
<ion-icon  name="create"></ion-icon>
</ion-button>

【讨论】：