How to remove tooltip but keep the 'title' attribute value

Question

<a href="this is tooltip" title="This is a test">Test</a>

Is there a way to remove the tooltip when hovering over the a element but still keep the the title attribute value?

Demo

Answer 1

The whole purpose of the title attribute, is to hold the text for the tooltip, for better accessibility; It is a build in feature in every modern browser.

If you don't want the tooltip functionality, don't use the title attribute. You can alternatively use data attributes to attach the textual value to any element, and retrieve it later like so:

HTML

<a href="http://google.com" data-title="This is a test">Test</a>

JS

$('a').data('title'); // "This is a test";

Answer 2

You shouldn't use the title if you want to avoid the tooltip because it was made for this kind of use.

But, if you are using this for content optimization I suggest you to start using microdata with your HTML5 code.

However, you can use JavaScript and CSS to create a simple hack that will save the data in your code but won't show the title for a link. Example

Answer 3

It depends on why you need the title attribute.

If you need it for screen readers but don't want a tooltip when you hover, you can use

<a href="This is a tooltip" aria-Label="This is a test">Test</a>