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');

Answer 3

Following Dan Herbert's suggestion above, here is the code:

$(element).hover(
    function () {
        $(this).data('title', $(this).attr('title'));
        $(this).removeAttr('title');
    },
    function () {
        $(this).attr('title', $(this).data('title'));
    });

Answer 4

You could use jQuery to remove the contents of the title attribte, or move it into some other parameter for later use.

This does mean you lose some accessibility though.

RE: ClueTip A search of Google seems to suggest this is a common problem - is this only happening in IE? ClueTip seems to work as expected in FireFox.

Answer 5

function hideTips(event) {  
    var saveAlt = $(this).attr('alt');
    var saveTitle = $(this).attr('title');
    if (event.type == 'mouseenter') {
        $(this).attr('title','');
        $(this).attr('alt','');
    } else {
        if (event.type == 'mouseleave'){
            $(this).attr('alt',saveAlt);
            $(this).attr('title',saveTitle);
        }
   }
}

$(document).ready(function(){
 $("a").live("hover", hideTips);
});

Hi all. I am using this solution and it works fine in all browsers.

Answer 6

Hack up ClueTip to use a renamed title attribute.

Answer 7

As I need this functionality to be available during another action (as copy screen or pick color,) my solution contains two functions to be called when that action starts and when it ends:

$.removeTitles = function() {
    $('[title]').bind('mousemove.hideTooltips', function () {
    $this = $(this);
    if($this.attr('title') && $this.attr('title') != '') { 
        $this.data('title', $this.attr('title')).attr('title', '');
    }
  }).bind('mouseout.hideTooltips', function () {
    $this = $(this);
    $this.attr('title', $this.data('title'));
  });
}

$.restoreTitles = function() {
    $('[title]').unbind('mousemove.hideTooltips').unbind('mouseout.hideTooltips');
    $('*[data-title!=undefined]').attr('title', $this.data('title'));
}

MouseEnter cannot be used because other element(s) could lay over the titled element (as an image in a titled div) and than mouseOut will occur as soon as hover over the inner element (the image!)

However when using mouseMove you should pay attention because the event fires multiple times. To avoid wiping the saved data, check first that the title is not empty!

The last line in RemoveTitles, attempts to restore the title from the element from which the mouse did not exit when calling the end on mouseClick or on a shortcut key.