javascript 删除标题标签工具提示

Remove title tag tooltip

提问by Tobias

Is there any way to remove the tooltip from title attribute without actually remove the title.

有没有办法从标题属性中删除工具提示而不实际删除标题。

I have a link with a title attribute like this

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

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

It is important that the title is intact since I need to read the url from there. All the fixes for this that I have found is to remove the title attribute and reuse it but in this case this is not possible.

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

Any ideas?

有任何想法吗？

回答by balexandre

it's all about the browser. It's the browserthat see the titleas a tooltip, from the browser specifications and interpretations.

这都是关于浏览器的。根据浏览title器规范和解释，浏览器将视为工具提示。

you should use, if you want to handle data like that, the HTML5 way(witch you can use in any other document type as it's ignored) and use:

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

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

with the data-attributes, there will be no tooltip as titleis not used, and you can easily get that using:

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

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

but, you will need to convert stuff and you said that you don't/can't do that.

但是，您需要转换内容，并且您说您不能/不能这样做。

you can easily convert all title's into data-titleand clean the title using

您可以轻松地将所有内容转换title为data-title并使用

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

(all code is to be used with jQuery Framework)

（所有代码都将与jQuery 框架一起使用）

回答by David says reinstate Monica

As you didn't mark this question as jquery, I'm assuming that you'd be open to a pure JavaScript solution?

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

The following works (on Ubuntu 11.04) in Firefox 5, Chromium 12 and Opera 11, I'm unable to test in IE, but as I'm using querySelectorAll()I'd suspect that it wouldn't work well, if at all. However:

以下在 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.

JS小提琴演示。

---

---

References:

参考：

• document.querySelectorAllat the Mozilla Developer Network.

• document.querySelectorAll在 Mozilla 开发者网络。

回答by Gedrox

Why don't you use jQuery to move this information from titleto element data.

为什么不使用 jQuery 将此信息从titleto element移动data。

Run this on element load:

在元素加载时运行：

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

And afterwards read URL like this:

然后像这样读取 URL：

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

Variable elhere is DOM element or element selector.

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