当我将鼠标悬停在 ionic 提供的 github-logo 上时如何覆盖标题 "ionicons-v5_logos"

Question

我正在尝试将 ionic (v5) 的 GitHub 徽标嵌入到我的项目中，该项目重定向到我创建的项目的 GitHub 存储库。

徽标有一个令人讨厌的标题 "ionicons-v5_logos"，当我将鼠标悬停在该图标上时会出现该标题。如何删除徽标的标题？我试图通过在 HTML 中编写以下代码来删除徽标的现有标题（但它似乎并没有删除 ion-icon 上的标题）-

<ion-icon name="logo-github" title="Check the code"></ion-icon>

我已尝试将 aria-label、aria-hidden 和 ariaLabel 属性用于 set/hide ion-icon 的标题，但没有任何效果.谁能指导我删除 ion-icon 的标题？

Answer 1

您可以使用 CSS 事件阻止禁用 ion-icon 弹出窗口并在 parent 元素上设置“标题”属性。

使用：

ion-icon {
  pointer-events: none;
}

在此处找到：https://github.com/palantir/blueprint/issues/2321

Answer 2

您可以尝试在 ion-button 中使用 ion-icon 并添加 （点击) 在 ion-button 上的功能如下：

<ion-button (click)="yourFunction()">
     <ion-icon name="close"></ion-icon>
</ion-button>

您将不会再在悬停时看到标题。

Answer 3

我有答案了！您可以在 GitHub (https://github.com/ionic-team/ionicons/releases?page=2) 上查看 Ionicon 的发行版，并查看 v5.2.0 已添加 title.You 可以使用旧版本。您可以通过在安装脚本中删除 5.5.2（为使用 Ionicons 添加到项目中）来导入 v5.1.2（以获得更好的结果）。

//Use this code

<script type="module" src="https://unpkg.com/ionicons@5.1.2/dist/ionicons/ionicons.esm.js"></script>

<script nomodule src="https://unpkg.com/ionicons@5.1.2/dist/ionicons/ionicons.js"></script>

当我将鼠标悬停在 ionic 提供的 github-logo 上时如何覆盖标题 "ionicons-v5_logos"

How to override the title "ionicons-v5_logos" when I hover over the github-logo provided by ionic

html

css

ionicons