Is there a way to suppress the pop-up titles on links, yet still keep them on the page for the visually impaired?
+2
A:
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.
Keltex
2009-05-01 01:03:23
Firefox doesn't have any tool-tip for links unless they have a title attribute declared.
Ben S
2009-05-01 01:13:31
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
2009-05-01 01:27:43
Presumably the tool-tip could be the URL of the link.
Ben S
2009-05-01 01:33:50
I think that's true in Opera >9.x (at last try) @ Ben S.
David Thomas
2009-05-01 01:44:11
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
2009-05-01 01:59:28
A:
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");
}
Ben S
2009-05-01 01:12:08
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
2009-05-01 01:14:37
I tend to agree with that suggestion, though it does complicate things as regards accessibility, maybe.
David Thomas
2009-05-01 01:43:09
A:
...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. */
}
<!-- html -->
<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.
David Thomas
2009-05-01 01:13:03
A:
I know this has been resolved but I also found this workaround: http://stackoverflow.com/questions/1299772/jquery-hide-native-tooltip-resolved
Phill Pafford
2009-08-19 14:43:59