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

Question

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

您可以通过这种方式找出我的某些元素的双工具提示。

您知道一种制作title属性以保持文本并阻止其显示弹出的方法吗？

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

Answer 1

没有办法禁用默认浏览器行为，即在浏览器本身中显示标题属性为" tooltip"。

您需要求助于一些JavaScript，甚至可能就像将标题设置为"悬停在鼠标上"，然后将其替换为鼠标。...

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

这将把标题设置为空白（因此"禁用"工具提示），并将其存储在数据属性中。然后，在Mouseout上，它将将标题退回（这意味着您的语义UI内容仍然可以使用）。您需要在代码中的正确点进行集成。