Disabling browser tooltips on links and <abbr>s

Question

I want to suppress the web browser's default tooltip display when a user hovers over certain links and elements. I know it's possible but I don't know how. Can anyone help?

The reason for this is to suppress the tooltip for microformatted date-times. The BBC dropped support for hCalendar because the appearane of the machine-readable date was an accessibility issue for those with cognitive disabilities aswell as some screen reader users. http://www.bbc.co.uk/blogs/bbcinternet/2008/07/why_the_bbc_removed_microforma.html

EDIT:

I whipped up a jquery plugin along the same lines as Aron's suggestion...

// uFsuppress plugin v1.0 - toggle microformatted dates
(function($){
$.ufsuppress = function() {
    $(".dtstart,.dtend,.bday").hover(function(){
        $(this).attr("ufdata",$(this).attr("title"));
        $(this).removeAttr("title");
    },function(){
        $(this).attr("title",$(this).attr("ufdata"));
        $(this).removeAttr("ufdata");
    });
}
})(jQuery);

// Usage
$.ufsuppress();

Answer 1

Ran across this thread when using the jQuery plugin timeago. Actually the solution is very simple using the CSS property pointer-events. Posting this for the benefit of people coming here through a search engine :)

.suppress {
    pointer-events:none;
}

Note that you shouldn't use this for things like links that should click through to something. In this case use the accepted JS solution.

Answer 2

As far as I know it is not possible to actually suppress showing the title tag.

There are some workarounds however.

Assuming you mean you want to preserve the title property on your links and elements, you could use Javascript to remove the title property at onmouseover() and set it again at onmouseout().

// Suppress tooltip display for links that have the classname 'suppress'
var links = document.getElementsByTagName('a');
for (var i = 0; i < links.length; i++) {
    if (links[i].className == 'suppress') {
        links[i]._title = links[i].title;
        links[i].onmouseover = function() { 
            this.title = '';
        }
        links[i].onmouseout = function() { 
            this.title = this._title;
        }
    }
}