How to disable tooltip in the browser with jQuery?

You could remove the title attribute on page load.

$(document).ready(function() {
    $('How to disable tooltip in the browser with jQuery?').removeAttr('title');
});

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

$(document).ready(function() {
    $('How to disable tooltip in the browser with jQuery?').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() {
    $('How to disable tooltip in the browser with jQuery?').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'));
    });
});