Hide native tooltip using jQuery

Question

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

Answer 1

The original poster only wanted to disable the native action of .tooltip(). If that is the case, use the following simple solution:

$(function() {
    $( document ).tooltip({
        items: "[data-tooltip]",
        content: function() {
            var element = $( this );
            if ( element.is( "[data-tooltip]" ) ) {
                return element.attr('data-tooltip');
            }
        }
    });
});

Now the [title] attribute is disabled and the tooltip will only trigger when an element has a [data-tooltip] attribute. By defining more 'items' you can create different behavior and styles:

$(function() {
    $( document ).tooltip({
        items: "[data-tooltip],img[alt]",
        content: function() {
            var element = $( this );
            if ( element.is( "[data-tooltip]" ) ) {
                return element.attr('data-tooltip');
            }
            if ( element.is( "[alt]" ) ) {
                return element.attr('alt') + something_else;
            }
        }
    });
});

http://jqueryui.com/tooltip/#custom-content & http://api.jqueryui.com/tooltip/#option-items