如何防止标题属性显示工具提示？答案

【问题标题】：How to prevent title attribute from showing tooltip?如何防止标题属性显示工具提示？
【发布时间】：2017-09-06 12:55:09
【问题描述】：

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

如您所见，我会得到一些元素的双重工具提示。

你知道一种方法可以让title 属性保留文本并阻止它显示弹出窗口吗？

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

【问题讨论】：

你不能把Semantic-UI当前绑定到title属性的Popup函数改成绑定到semantic-title这样的另一个属性吗？
Semantic-UI 的 Popup 功能没有绑定到 title 属性。无论如何这不会解决问题，因为标题属性仍然存在。

标签： html attributes popup tooltip title

【解决方案1】：

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

您需要使用一些 javascript，它甚至可以像在悬停时将标题设置为空白并在鼠标移出时替换它一样简单......

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

这会将标题设置为空白（因此“禁用”工具提示），并将其存储在数据属性中。然后在 mouseout 上它会将标题放回原处（这意味着您的语义用户界面内容仍然可以使用）。当然，您需要将其集成到代码中的正确位置。

【讨论】：