删除标题标签工具提示答案

【问题标题】：Remove title tag tooltip删除标题标签工具提示
【发布时间】：2011-09-30 06:46:53
【问题描述】：

有什么方法可以在不实际删除标题的情况下从标题属性中删除工具提示。

我有一个带有这样标题属性的链接

<a href="url" title="anotherURL"></a>

标题完好无损很重要，因为我需要从那里读取 url。我发现的所有解决方法是删除标题属性并重用它，但在这种情况下这是不可能的。

有什么想法吗？

【问题讨论】：

如果你不想要一个工具提示，为什么你需要一个标题属性？拥有 title 属性的唯一原因是显示工具提示...
我需要它让 swfadress 读取单独的 url。我可以用 rel 标签来代替，但 IE 出现问题
如果要在属性中存储任意数据，请使用 HTML 5 的 data-*。不要滥用现有的属性来确定用途。

标签： javascript html css tooltip title

【解决方案1】：

一切都与浏览器有关。 浏览器将title视为工具提示，来自浏览器规范和解释。

如果你想处理这样的数据，你应该使用HTML5 way（你可以在任何其他文档类型中使用它，因为它被忽略了）并使用：

<a href="url" data-title="anotherURL"></a>

使用data- 属性，将不会有工具提示，因为title 未使用，您可以使用以下方法轻松获得：

$("a").attr("data-title")

但是，你需要转换东西，你说你不/不能这样做。

您可以轻松地将所有title 转换为data-title 并使用清理标题

$("a").attr("data-title", function() { return $(this).attr("title"); } );
$("a").removeAttr("title");

（所有代码都与jQuery Framework一起使用）

【讨论】：

【解决方案2】：

由于您没有将此问题标记为 jquery，因此我假设您愿意接受纯 JavaScript 解决方案？

以下在 Firefox 5、Chromium 12 和 Opera 11 中有效（在 Ubuntu 11.04 上），我无法在 IE 中进行测试，但由于我使用的是querySelectorAll()，我怀疑它不会很好用，如果有的话。然而：

var titled = document.querySelectorAll('[title]'); // gets all elements with a 'title' attribute, as long as the browser supports the css attribute-selector
var numTitled = titled.length;

for (i=0; i<numTitled; i++){
    titled[i].setAttribute('data-title',titled[i].title); // copies from 'title' to 'data-title' attribute
    titled[i].removeAttribute('title'); // removes the 'title' attribute
}

JS Fiddle demo.

参考资料：

document.querySelectorAll at the Mozilla Developer Network。

【讨论】：

【解决方案3】：

为什么不使用 jQuery 将这些信息从 title 移动到元素 data。

在元素加载时运行：

$(el).data('url', $(el).attr('title')).attr('title', '');

然后像这样读取 URL：

$(el).data('url');

变量el这里是DOM元素或元素选择器。

【讨论】：