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

Question

8

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

但是，这样会导致有些元素出现两个工具提示。

你知道如何让title属性保留文本并停止显示弹出框吗？

我不想删除文本，因此无法使用jQuery提供的removeAttr方法...

- smartmouse

你能否将Semantic-UI的Popup函数从绑定到title属性改为绑定到另一个属性，比如semantic-title？ - Carlos Alves Jorge

Semantic-UI的弹出框功能不会绑定到标题属性。无论如何，这也无法解决问题，因为标题属性仍然存在以供显示。 - smartmouse

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Stuart · Accepted Answer

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

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

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

这将把标题设置为空（从而“禁用”工具提示），并将其存储在数据属性中。然后，在鼠标移开时，它会将标题放回去（这意味着您的Semantic-UI效果仍将起作用）。当然，您需要在代码的正确位置集成它。