stop the title showing up on hover with jquery?

Question

I basically am storing some data in the title attribute of some divs that I probably shouldn't be. Anyways I have done it now and when I hover over these elements this information pops up in the browsers handy default tooltip.

e.g

<div title="blah blah blah">something</div>

Is there a method to stop this tooltip title functionality from working as it normally does?

Answer 1

You can move that data from the title to another attribute and use it from there.

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

Answer 2

Instead of using HTML attributes, you could store the information using $().data()

Answer 3

As others have said, you should probably store the data in another field than the title.
To answer your question about hiding the title hover, have a look at clueTip (or directly at the js). It replaces the standard tooltips with fancy versions, if it can do that I'm sure it can be tweaked to display nothing instead.

Answer 4

You can remove the title attribute from your HTML element and store it elsewhere.

jQuery provides a way to store information sticked to HTML elements using $().data().

This should work:

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

You can retrieve it later using $(this).data('title')

Answer 5

Zed and Vincent are right.

If you want it as a jquery function (it removes the title attribute while mouse is over it, and it restores it when it leaves) to be included in a multipage script:

    (function($) {
        $.fn.tooltipSuppress = function() {
            $(this).hover(
                function() {
                    $(this)
                        .data('title', $(this).attr('title'))
                        .removeAttr('title');
                }, 
                function() {
                    $(this).attr('title', $(this).data('title'));
                }
            );
        }
    })(jQuery);

Then just call this to the elements you want it applied:

    $('div,someOtherSelector,ecc').tooltipSuppress();