javascript - 父工具提示应覆盖子工具提示

Question

考虑这个 HTML:

<div title="parent tooltip">
 <a title="child tooltip">child</a>
 <a title="child tooltip 2">child 2</a>
</div>

当您将鼠标悬停在某个子项上时，会出现该子项的工具提示。当您将鼠标悬停在子项周围的死 Angular 上，但在父级内部时，将出现父级的工具提示。我该怎么做才能让 parent 的工具提示无处不在？

蛮力解决方案是使用 JS 删除所有子工具提示，只要父工具提示设置了标题。当父项的标题被删除时，JS 会放回工具提示。对于大型文档来说，这将是过度处理，因此我希望有一个更高效的解决方案。

我为什么要这样做？我有一个 JS 函数来禁用整个元素。它基本上向元素添加了一个类，使其看起来淡出并使其具有不可放置的光标。当您将鼠标悬停在禁用的元素上时，工具提示会显示“您不能使用此...等等”。如果子元素触发它的工具提示，那就很奇怪了。 child 可能会说“单击此处执行此操作”之类的话 - 这将是糟糕的用户体验，因为 parent 已被禁用。

function disable(element) {
 element.writeAttribute('title', 'you cannot use this');
 element.addClassName('disabled');
}

function enable(element) {
 element.writeAttribute('title', null);
 element.removeClassName('disabled');
}

Answer 1

您拥有的 HTML 标记基本上明确地告诉浏览器按照您观察到的方式执行操作。您唯一可以做的就是应用 JavaScript 来摆脱有问题的元素的“标题”属性，或者(更好)当您不想显示标题文本时，不要首先将标题属性放在元素上。

我遇到过这种情况，具体如下。在我的网络应用程序中，我有一点“这是什么？”功能，涉及显示在可能需要解释的事物附近的小“[?]”图标。您单击小图标，弹出“帮助气泡”。这是一个很常见的功能。无论如何，可点击的小东西被实现为 <div>那是绝对定位的，并且“气泡”在词法上嵌套在其中，带有“position:relative”。可点击的图标有自己的“标题”属性，但当然，当显示帮助气泡时，我不希望该标题显示为天桥文本，因为它很奇怪。因此，我打开气泡的 JavaScript 代码必须在气泡打开时将父元素的“标题”属性存储在 jQuery“.data()”存储中，并在气泡关闭时恢复标题。