How to disable tooltip in the browser with jQuery?

Question

Is there a way to disable browser tooltip from displaying when hovering over elements that have attribute 'title' populated? Note that I don't want to remove title content. Here is the code are requested:

  $(document).ready(function() {
     $('a.clickableSticky').cluetip({
         splitTitle: '|',
         showTitle: false,
         titleAttribute: 'description',
         activation: 'click',
         sticky: true,
         arrows: true,
         closePosition: 'title'
     });
 });

and in asp.net

  <ItemTemplate>
     <a class="clickableSticky" href="#"
     title=' <%#((Limit)Container.DataItem).Tip %>'>
     <img src="..\App_Themes\default\images\icons\information.png"/>
     </a>

 </ItemTemplate>

Answer 1

You could remove the title attribute on page load.

$(document).ready(function() {
    $('[title]').removeAttr('title');
});

If you need to use the title later, you can store it in the element's jQuery data().

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

Another option is to change the name of the title attribute to aTitle, or something else that the browser would ignore, and then update any JavaScript to read the new attribute name instead of title.

Update:

An interesting idea you could use is to "lazily" remove the title when hovering over an element. When the user hovers off the element, you can then put the title value back.

This isn't as straightforward as it should be because IE doesn't correctly remove the tooltip on the hover event if you set the title attribute to null or remove the title attribute. However, if you set the tooltip to an empty string ("") on hover, it will remove the tooltip from all browsers including Internet Explorer.

You can use the method I mentioned above to store the title attribute in jQuery's data(...) method and then put it back on mouseout.

$(document).ready(function() {
    $('[title]').mouseover(function () {
        $this = $(this);
        $this.data('title', $this.attr('title'));
        // Using null here wouldn't work in IE, but empty string will work just fine.
        $this.attr('title', '');
    }).mouseout(function () {
        $this = $(this);
        $this.attr('title', $this.data('title'));
    });
});

Answer 2

Here is the modern jQuery way to do it (IMO)...

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

...and of course, reading the title attribute back is done with...

$('#whatever').data('title');