Suppress Link Titles

Question

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

score 5 · Accepted Answer · answered May 01 '09 at 01:03

5

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.

answered May 01 '09 at 01:03

Keltex

26,220
11
79
111

1

Firefox doesn't have any tool-tip for links unless they have a title attribute declared. – Ben S May 01 '09 at 01:13
Isn't the question asking how can you keep the title attribute while hiding the tooltips? I don't know of any browser that shows tooltips on links without title attributes. What would the tooltip say? – Calvin May 01 '09 at 01:27
Presumably the tool-tip could be the URL of the link. – Ben S May 01 '09 at 01:33
I think that's true in Opera >9.x (at last try) @ Ben S. – David Thomas May 01 '09 at 01:44
That doesn't work in Opera 9.64 (latest version). URLs are displayed only in the status bar, just like in FF3 and IE. If you see a URL as a tooltip, it's because the link has the URL as its title attribute. – Calvin May 01 '09 at 01:59
did you try this http://stackoverflow.com/questions/9927640/styling-native-tooltip-from-title-tooltip-text ? – Adriano Sep 05 '14 at 14:52

score 3 · Answer 2 · edited May 23 '17 at 11:48

3

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

edited May 23 '17 at 11:48

Community

1
1

answered Aug 19 '09 at 14:43

Phill Pafford

83,471
91
263
383

Link only answers can be avoided. – ngrashia Jul 15 '14 at 11:05
So can comments on 5-year-old answers. – Jason S Dec 22 '15 at 18:27

score 1 · Answer 3 · answered Jul 22 '15 at 19:15

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.

score 0 · Answer 4 · answered Jan 20 '13 at 18:39

0

This works in jQuery.

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

answered Jan 20 '13 at 18:39

Andrew Phillips

324
2
8

score 0 · Answer 5 · edited Nov 25 '14 at 19:40

...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.

score -1 · Answer 6 · answered May 01 '09 at 01:12

-1

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

answered May 01 '09 at 01:12

Ben S

68,394
30
171
212

1

I get the impression he's trying to remove them for other people on his own/work/company site, rather than being personally offended by their presence. I don't understand why, mind; that's just my initial impression. – David Thomas May 01 '09 at 01:14
1

Well, in that case, just avoid putting title attributes on your anchors. – Ben S May 01 '09 at 01:27
1

I tend to agree with that suggestion, though it does complicate things as regards accessibility, maybe. – David Thomas May 01 '09 at 01:43

Suppress Link Titles

6 Answers6

Linked