•  03-07-2019
  •  | 
  •  

Question

Is there any way to suppress the pop-up titles on links, yet still keep them on the page for the visually impaired?

Was it helpful?

Solution

That's a function of the browser to interpret the link title and display a tooltip/popup. There's no way to suppress them. I tried (because a client didn't like them either) and there's no way around them.

OTHER TIPS

I know this has been resolved but I also found this workaround: Hide native tooltip using jQuery

I had this issue with a project where the client wanted to display their own tooltip (which was done with CSS) but it was also showing because of the browser-initiated tooltip also, so it showed twice. We got around this by removing the 'title' attribute and instead using 'data' to populate the text in the CSS.

I'm not sure what you mean as keeping them on the page for the visually impaired, as they're only visible in the source code?

For example:

<a href="link" title="something">Link title here</a>

would show the link 'Link title here' on the page as well as the annoying popup when you hover on it.

<a href="link" data="something">Link title here</a>

would show the link 'Link title here' but would NOT show the annoying popup on hovering, though you can still use the data tag to reference whatever you want to put there (in our case, we put the text for the tooltip for the CSS to refer to).

Obviously if you remove the title tag completely the issue is resolved, but you said you needed to keep it there so this is my workaround as used before.

This works in jQuery.

var val;
$('[YOUR_SELECTOR]').hover(function() {
    val = $(this).attr('title');
    $(this).removeAttr('title');
  },function() {
    $(this).attr('title',val);
})

...it possibly wouldn't be ideal, but you could always try, in place of a title attribute in the <a href>, a <span> within the <a> tags:

/* screen.css */

a   { }

a span.titleText {
    display: none;
    position: absolute;
    bottom: 1.2em;
    left: 0;
}

a:hover span.titleText,
a:active span.titleText,
a:focus span.titleText {
    display: block;
}

/* audio.css */

a span {
    display: inline; /* or whatever the relevant attribute would 
                        be in an audio stylesheet. */
}

<head>
    <link href="screen.css" type="text/css" rel="stylesheet" media="screen" />
    <link href="audio.css" type="text/css" rel="stylesheet" media="screen-reader, audio" />
</head>

<a href="http://some.url.com">
    <span class="titleText">This is the title</span>This is the link
</a>

I don't, however, suggest it as a particularly practical solution. And I'm fairly certain it wouldn't validate. If I knew JS I'd suggest something more workable, but even then I'm not convinced it would work.

Links in my browser don't show tool-tips like that unless they have a title attribute.

If you want, you could use Greasemonkey to run this bit of javascript on evey page to remove them.

var anchorTags;
anchorTags = document.getElementsByTagName("a");
for(var i = 0; i < anchorTags.length; i++) {
  anchorTags[i].removeAttribute("title");
}
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top