CODEWITHSUNDEEP
javascripthtmlcsstooltiptitle
Tobias
Tobias

Reputation: 494

Remove title tag tooltip

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.

Any ideas?

Upvotes: 5

Views: 22213

Answers (3)

balexandre
balexandre

Reputation: 75093

It's all about the browser. It's the browser that sees the title as a tooltip, from the browser specifications and interpretations.

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

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

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

$("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 titles into data-title and clean the title using

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

(all code is to be used with jQuery Framework)

Upvotes: 11

David Thomas
David Thomas

Reputation: 253328

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

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:

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.

References:

Upvotes: 5

Gedrox
Gedrox

Reputation: 3612

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

Run this on element load:

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

And afterwards read URL like this:

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

Variable el here is DOM element or element selector.

Upvotes: 0

Related Questions