Question

考虑这个HTML：

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

当您将鼠标悬停在某个孩子上时，系统会显示该子项的工具提示。当您将鼠标悬停在子项周围的死区上，但在父项内部时，将显示父项的工具提示。如何制作它以便父母的工具提示到处显示？

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

为什么我这样做？我有一个JS函数来禁用整个元素。它基本上为元素添加了一个类，使其看起来淡出并使其具有无删除光标。当您将鼠标悬停在已禁用的元素上时，工具提示会显示“您无法使用此...等等”。如果子元素触发其工具提示会很奇怪。孩子可以说“点击此处执行此操作” - 这将是一个糟糕的用户体验，因为父母已被禁用。

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（）”存储中父元素的“title”属性，并在气泡关闭时恢复标题。

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

1 个答案: