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

Gosse

The BBC took the right approach, the title attribute is there to provide information to the user, not to store semweb data. I'd follow their lead instead of trying to hack around having a title attribute in the HTML by removing it from the DOM with JS (which will still leave the information in place for a lot of human users). – Anselm

The new microformats "value class pattern" provides a method for publishing dates without using the abbr element. There's more information on the microformats wiki: microformats.org/wiki/value-class-pattern – Hydropic

Answer 1

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;
        }
    }
}

Jeri

Nice, this is preferable to removing the titles altogether because they need to be present for user scripts and plugins like Operator. Very useful thankyou. – Gosse

I guess it's impossible to actually suppress the default browser behaviour then? That would be ideal but I do like this solution. – Gosse

JavaScript-Memory-Consumption-Awareness-Day: don't use function literals in loops, move them out of the loop if possible! – Neddra

In the case of microformatted dates the title attribute is the machine readable content which means it's unfortunately less useful and even confusing to some screen reader users. – Gosse

hehehe. Christoph mentions this often. I've actually changed my ways, thanks Christoph – Foltz

@meouw: the current JavaScript implementations aren't that great performance-wise (change is happening, but some things just can't be optimized in a language as dynamic as JavaScript); so imo you should give the interpreters all the help you can ;) – Neddra

Answer 2

Add this element to your html

    onmouseover="title='';"

For example i have a asp.net checkbox I store a hidden variable but do not want the user to see on as the tooltip.

Immorality

Nowadays, one would use data- attributes to store hidden values on elements. – Radiothorium

Answer 3

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.

Perrault

Answer 4

Something like this in prototype would blank all title attributes of datetime microformats with a class of 'dtstart':

$$('abbr.dtstart').each(function(abbr){abbr.title=' '})

Note I used a blank space, the Mozilla documentation for element.title states

According to bug 264001 , setting title to the empty string triggers the default inheriting behavior. To cancel inheritance, title must be set to a non-empty whitespace string.

Tonguelash

Thanks Paul, I looked at this option however ideally we'd need to preserve the titles so that other scripts and plugins can still use the machine-readable data stored in the DOM. – Gosse

Answer 5

This won't help with your problem but might be interesting nevertheless: There's another universal attribute apart from title which can be used to store data - lang!

Just convert the data you want to store to a continuous string and prefix it with 'x-' to declare private usage in accordance with RFC 1766.

---

In the comments, sanchothefat clarified that he wants to solve the usability-issues with the abbr-design-pattern in microformats. But there are other patterns which are as semantically meaningful (or, in my opinion even more so) than this pattern. What I'd do:

<p>
 The party is at
  <dfn class="micro-date">10 o'clock on the 10th
   <var>20051010T10:10:10-010</var></dfn>.
</p>

together wtih these styles

dfn.micro-date {
    font-weight: inherit;
    font-style: inherit;
}
dfn.micro-date var {
    display: none;
}

In my opinion, the semantically most correct way would be to use a dl definition list - which isn't allowed inside of paragraphs. This can be worked around with the following pattern:

<p>
 The party is at <q cite="#micro-dates">10 o'clock on the 10th</q>.
</p>

<dl id="micro-dates">
 <dt>10 o'clock on the 10th</dt>
 <dd>20051010T10:10:10-010</dd>
</dl>

which requires a more sophisticated stylesheet:

q[cite='#micro-dates']:before {
    content: '';
}
q[cite='#micro-dates']:after {
    content: '';
}
dl#micro-dates {
    display: none;
}

Neddra

The problem I'm trying to (sort of) solve is the ongoing hooha with the abbr-design-pattern in microformats. One of the aims to use the most semantically correct markup available and an abbreviation of a date using the 'title' attribute was their choice. Unfortunately there were accessibility issues – Gosse

Very interesting food for thought there, I may have been a bit hasty choosing an answer... – Gosse

Do you want to post this suggestion to the uF-discuss mailing list/IRC or should I? – Gosse

Feel free to do whatever you like with these suggestions - I already asked on #microformats for comments - which included the suggestion to try to incorporate some form of include-pattern to support existing tools – Neddra

PS: I'd appreciate it if you'd add another comment if you really post a message to the mailing list - I'm not following this list, but I'd at least check the archives to see what other people think about this... – Neddra

Hi Cristoph, I've just posted to the uf-discuss list. Sorry it took me a while to get round to it. Should be in the archives momentarily under the subject 'value-title design pattern' – Gosse

Answer 6

This is what i did.

$('.fancybox').hover(
    function(){
        $(this).attr('alt',$(this).attr('title'));
        $(this).attr('title','');
    },
    function(){
        $(this).attr('title',$(this).attr('alt'));
        $(this).removeAttr('alt');
    }
).click(function(){
    $(this).attr('title',$(this).attr('alt'));
    $(this).removeAttr('alt');
});

Fertility

Answer 7

You can hook the 'mouseenter' event and return false which will stop the native tooltips from being displayed.

$(selector).on( 'mouseenter', function(){
    return false;
});

Bosporus

Answer 8

It's possible to suppress this behaviour with jQuery

var tempTitle;
$('[title]').hover(
  function(e) {
    debugger;
    e.preventDefault();
    tempTitle = $(this).attr('title');

    $(this).attr('title', '');
    // add attribute 'tipTitle' & populate on hover
    $(this).hover(
      function() {
        $(this).attr('tipTitle', tempTitle);
      }
    );
  },
  // restore title on mouseout
  function() {
    $(this).attr('title', tempTitle);
  }
);

.progress3 {
  position: relative;
  width: 100px;
  height: 100px;
  background: red;
}
.progress3:hover:after {
  background: #333;
  background: rgba(0, 0, 0, .8);
  border-radius: 5px;
  bottom: 26px;
  color: #fff;
  content: attr(data-tooltip);
  left: 20%;
  padding: 5px 15px;
  position: absolute;
  z-index: 98;
  width: 220px;
}
.progress3:hover:before {
  border: solid;
  border-color: #333 transparent;
  border-width: 6px 6px 0 6px;
  bottom: 20px;
  content: "";
  left: 50%;
  position: absolute;
  z-index: 99;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div title='abc' data-tooltip="This is some information for our tooltip." class="progress3">
  title='abc' will not be displayed
</div>

fiddle

Minh