tags:

views:

1385

answers:

3

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...
});
+5  A: 

Apparently the title attribute isn't 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.

tvanfosson
+1 I was just about to click 'Post'
karim79
The thing is I have a popup (click the link) that takes the title value and displays this in the popup but I want to eliminate the hover effect but not the click popup. Don't think I could use hover to remove the title value cause this will throw off my popup
Phill Pafford
Ok. Then move the contents of the title attribute into data and retrieve it from there in your click handler. will update.
tvanfosson
+4  A: 

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.

Fabian Buch
How handy! +1 for this
Kezzer
The thing is I have a popup (click the link) that takes the title value and displays this in the popup but I want to eliminate the hover effect but not the click popup. Don't think I could use hover to remove the title value cause this will throw off my popup
Phill Pafford
A: 

To get it out of the title, I would use the data() method:

$(document).ready( function () {
    $('.items_with_title').each( function () {
        $(this).data('title', $(this).attr('title') );
        $(this).removeAttr('title');
    });
});

// to access it
$(document).ready( function () {
    $('A').click( function () {
        alert($(this).data('title'));
    });
});

You could also make the selector for any item that has a title attribute:

$('*[title]').each(...
MacAnthony
I added some code that kinda uses this method but it's not working, any thoughts?
Phill Pafford
I changed it a bit to use a click event to access the title data. Can you let me know what issue you are running into?
MacAnthony