How to prevent title attribute from showing tooltip?

Question

I'm developing a web app using Angular and Semantic-UI. I'm using Semantic-UI's Popup to show stylish tooltips when users hover some elements. Anyway I have to add title attribute to be compliant with A11Y (WCAG 2.0) and to make screen readers to read the text content of title attribute.

As you can figure out in this way I get double tooltips for some elements.

Do you know a way to make title attribute to keep text and to stop it from displaying popup?

I don't want remove the text so I can't use removeAttr method provided by jQuery...

Answer 1

There's no way to disable the default browser behaviour, which is to show the title attribute as a "tooltip" in the browser itself.

You'll need to resort to some javascript, it could even be as simple as setting the title to blank on hover, and replacing it on mouse out....

onmouseover="this.setAttribute('data-title', this.title);this.title = ''"
onmouseout="this.setAttribute('title', this.getAttribute('data-title')"

This will set the title to be blank (therefore "disabling" the tooltip), and store it in a data attribute. then on mouseout it will put the title back (meaning your semantic-ui stuff will still work). You will need to integrate this at the correct point in your code of course.