Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Hide native tooltip using jQuery

Tags:

jquery

tooltip

Is there a way to hide the native tooltip action when a user hovers over a anchor tag with a title attribute? I don't want to remove it just don't display the nasty yellow box that is the default tooltip action.

UPDATE:

After reading a couple of other posts I don't think I can hide the title attribute for the native tooltip action, but I'm trying to think outside of the box here. Could I use another attribute instead of the title attribute inside the anchor tag and still keep a valid page???

Removing the title attribute value is not an option unless someone can figure out how to add it back for a onclick event?

WORKING CODE BELOW

$('[title]').each( function() {
    var $this = $(this);
    $this.data('title',$this.attr('title'));
    $this.removeAttr('title');
});

$('a').click( function() {
    var $this = $(this);
    var title = $this.data('title');
    ... do your other stuff...
});
like image 560
Phill Pafford Avatar asked Aug 19 '09 12:08

Phill Pafford


2 Answers

Apparently the title attribute doesn't fall under the normal event handler. Anyway, my original answer didn't work, though I'll keep playing with it to see if I can get it to work. If you need to retain the title attribute but don't want the popup effect, as indicated in your comments, then store the title attribute in the element's data and use it from there.

$('[title]').each( function() {
    var $this = $(this);
    $this.data('title',$this.attr('title'));
    $this.removeAttr('title');
});

$('a').click( function() {
    var $this = $(this);
    var title = $this.data('title');
    ... do your other stuff...
});

Original answer:

Give every element that has a title a specific hover over handler that prevents the default action.

$('[title]').hover(
   function(e) {
       e.preventDefault();
   },
   function() { }
);

Except after testing it doesn't seem to work.

like image 111
tvanfosson Avatar answered Oct 06 '22 19:10

tvanfosson


You can remove it by:

$("a").removeAttr("title");

This will remove it for js-users only, so it's still accessable and findable for search engines.

like image 35
Fabian Buch Avatar answered Oct 06 '22 20:10

Fabian Buch