jQuery: How to disable tooltip

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 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 2

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 handle setting the title attribute to null or removing the attribute on hover. The trick is to set the tooltip to an empty string ("") on hover. This will effectively remove the tooltip from all browsers.

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.

Answer 3

Hack up ClueTip to use a renamed title attribute.

Answer 4

thanks buddy it helped me well ...