html - 如何防止 title 属性显示工具提示？

Question

我正在使用 Angular 和 Semantic-UI 开发网络应用程序。当用户将鼠标悬停在某些元素上时，我正在使用 Semantic-UI 的 Popup 来显示时尚的工具提示。无论如何，我必须添加 title 属性以符合 A11Y (WCAG 2.0) 并让屏幕阅读器阅读 title 属性的文本内容。

正如您可以通过这种方式弄清楚的那样，我得到了某些元素的双重工具提示。

你知道如何让 title 属性保留文本并阻止它显示弹出窗口吗？

我不想删除文本，所以我不能使用 jQuery 提供的 removeAttr 方法...

Answer 1

无法禁用默认的浏览器行为，即在浏览器本身中将 title 属性显示为“工具提示”。

您需要求助于一些 javascript，它甚至可以简单到将悬停时的标题设置为空白，然后在鼠标移开时替换它....

onmouseover="this.setAttribute('data-title', this.title);this.title = ''"
onmouseout="this.setAttribute('title', this.getAttribute('data-title')"

这会将标题设置为空白(因此“禁用”工具提示)，并将其存储在数据属性中。然后在 mouseout 上它会放回标题(意味着你的语义 ui 东西仍然有效)。当然，您需要将其集成到代码中的正确位置。