Disabling browser tooltips on links and 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 he

Answer 1

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

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

Answer 2

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