CODEWITHSUNDEEP
htmlcss
Jung
Jung

Reputation: 207

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

<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

Upvotes: 7

Views: 18595

Answers (3)

Red
Red

Reputation: 3267

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>

Upvotes: 1

lowmatic
lowmatic

Reputation: 59

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

Upvotes: 0

Ronen Cypis
Ronen Cypis

Reputation: 21470

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

Upvotes: 5

Related Questions