Question

I am creating a simple tooltip plugin, which shows “title” attribute contents as tooltip text. So I want to disable the default browser behavior of showing the tooltip as I am displaying it in a div. So I used the code below, but this doesn’t work and I can see the default tooltip and my tooltip both together, default tooltip overlaps mine tooltip.

$("a").hover(function(e){
  e.preventDefault();   
});

Answer 1

Why don’t you just ensure that there are no alt and title attributes in the <a> tag.

<a href="http://google.com" alt="Google!" title="Google!" />Goto Google</a>

Changes to –

<a href="http://google.com" alt="Google!"  />Goto Google</a>

​
So all you have to do is run this jQuery code on all the <a> tags you want to remvove the default tooltip behavior on –

$(".desiredElements").removeProp('alt').removeProp('title');

---

If you want to maintain those tooltips for use at a later stage, you should save them in the $.data object, and return the values in the second hover function, the “hover out” callback.

$('.desiredElements').hover(function() {
    $thisCached = $(this);
    $.data(this, 'title', $thisCached.attr('title'));
    $thisCached.removeAttr('title').removeAttr('alt');
},function(){
    $thisCached = $(this);
    $thisCached.attr('title',$.data(this, 'title');
    $thisCached.attr('alt',$.data(this, 'title');
});