防止父元素的“title”属性导致浏览器飞越答案

【问题标题】：Prevent "title" attribute of parent element from causing a browser flyover防止父元素的“title”属性导致浏览器飞越
【发布时间】：2011-03-10 09:05:31
【问题描述】：

好的浏览器都可以这样工作，一个元素的空“title”属性意味着“不要费心在这里显示标题”。这是有道理的，因为对于大多数人来说，一个没有任何东西的白色小天桥（edit - 或者只有一个空格字符）是完全没用的。

IE的设计者不同意。

我的问题是我有点“这是什么？”网站上的机制涉及绝对定位的<div>，其中包含一个问号的小图形。 <div> 有一个“title”属性，上面有一个问题，比如“'History Eraser Button'有什么作用？”当您单击问号时，会弹出一个小的“帮助”气泡，您可以阅读有关该主题的信息。 “标题”的想法是，如果用户将鼠标悬停在问号上，他们会看到一个（希望）是他们可能想知道的问题。

“标题”的问题在于弹出的“帮助”气球位于绝对定位的<div> 内，因此它正确地位于页面上。换句话说，绝对定位的<div> 只是具有“位置：绝对”，但允许将其放置在“正确”位置的页面上，而无需进行任何偏移计算。因此，“帮助”气球会自动出现在正确的位置。但是：父级<div> 上的“标题”令人讨厌，因为在气球打开后浏览器会弹出它。为什么？因为“帮助”气球在词汇上包含在外部<div> 中，即使外部<div> 只是一个带有问号的小东西。

因此解决方案#1 是给“帮助”气球<div> 其自己的“标题”属性，其中没有任何内容（编辑 - 我错了; 它不是标题中的 nothing，它是一个空格字符）。这很好用，除了在 IE 中。现在在 IE 中，那个空的“title”属性会导致浏览器显示一个小的空白矩形。很有帮助。

我当然可以摆弄 Javascript 并在气球显示时将“title”属性从父 <div> 中删除，但我很好奇“覆盖”父元素“title”的可能方法除了标记之外什么都可以完成的 IE。如果不可能，那好吧。

简单的演示页面：http://gutfullofbeer.net/title.html（用 IE 7 或 8 试试看，看到小空白框）

edit — 哈哈哈 — 当我更改代码以明确将所有父元素上的“title”属性设为空时，IE 会显示一个带有单词“null”的天桥:-)

【问题讨论】：

如果你愿意，我可以设置一个测试页；这是一个非常简单的交易。
确定问题现在包含测试页。
如果服务器端没有标题，或者它是空白的等，你能不包括标题吗？
请注意，在您的测试页面上，我还在 Google Chrome 5 和 Safari 5（都在 Mac 上）上看到了“空标题”弹出窗口。 IMO，这是正确的行为 - Firefox 也应该显示这一点。
@Kyle 嗨，谢谢。问题是我想要我的小问号上的标题当帮助气泡未打开时。打开后，我不太关心小问号上的帮助天桥，但我绝对不希望它越过帮助气泡，因为那里很烦人而且是错误的。我会看看是否可以更新我的示例页面以显示我试图避免的效果。

标签： javascript html title

【解决方案1】：

为什么不将标题分配给问号元素 (#qmark) 而不是包含的 div？所以而不是：

<div title="this is the overlapping title">  
    <div id="qmark">?</div>
    <div id="hiddenContainer"></div>
</div>

应该是

<div>
    <div id="qmark" title="this title no longer overlaps">?</div> 
    <div id="hiddenContainer"></div>
</div>

【讨论】：

这是个好主意，事实上，我在阅读@desau 的回答后开始这样做。然后我意识到我的“帮助”气泡实际上可能嵌套在带有“标题”标记的 another 层中。有人可能会争辩说，我只是使用了太多这些，我应该改掉这个习惯，尤其是考虑到“触摸”界面的兴起，无论如何都没有“悬停”。

【解决方案2】：

我不认为你可以做你想做的事。无论如何，这似乎是一种 hack——子 DOM 元素属性并不意味着“覆盖”父属性。您可能应该使用正确的标题来包装特定文本，例如：

http://jsbin.com/ezipe

【讨论】：

然而，特别是“title”属性真的不能以任何其他方式工作。根据我能想到的任何定义，容器具有与包含的元素不同的标题都不是无效的，并且浏览器只会向我显示一个标题，它是最接近鼠标所在元素的标题已暂停。

【解决方案3】：

我最终扩充了我现有的打开/关闭“帮助”气泡的代码，以便它运行父元素链并使用 jQuery“数据”工具存储“标题”代码。当气泡关闭时，标题会恢复。

【讨论】：