Disabling browser status bar text
Background
Modern browsers do away with the classic status bar and instead draw a small tooltip at the bottom of their windows that displays the link target on hover/focus.
An example of this (undesirable, in my case) behavior is illustrated in the following screenshot:
Questions
- Is there a portable way to disable these tooltips?
- Am I missing any obvious drawbacks to doing this in my particular situation?
- Is my attempt (see below) a reasonable way of accomplishing this?
Reasoning
I am working on an intranet web application and would like to disable this behavior for some application-specific actions because quite frankly, https://server/# everywhere looks like an eye-sore and is obtrusive since in some instances my application draws its own status bar in that location.
My Attempt
I'm not a web-developer by trade, so my knowledge is still rather limited in this domain.
Anyway, here's my attempt with jQuery:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Target Tooltip Test</title>
<style>
a, span.a {
color: #F00;
cursor: pointer;
text-decoration: none;
}
a:hover, span.a:hover {
color: #00F;
}
a:focus, span.a:focus {
color: #00F;
outline: 1px dotted;
}
</style>
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script>
$(document).ready(function() {
patch();
});
function patch() {
$('a').each(function() {
var $this = $(this).prop('tabindex', 0);
if($this.prop('href').indexOf('#') == -1 || $this.prop('rel').toLowerCase() == 'external') {
return;
}
var $span = $('<span class="a" tabindex="0"></span>');
$span.prop('data-href', $this.prop('href'));
$span.text($this.text());
$this.replaceWith($span);
});
$('a[rel="external"]').click(function() {
window.open($(this).prop('data-href'));
return false;
});
$('span.a').click(function() {
location.href = $(this).prop('data-href');
}).keypress(function(event) {
if(event.keyCode == 13) {
location.href = $(event.target).prop('data-href');
}
}).focus(function() {
window.status = ''; // IE9 fix.
});
}
</script>
</head>
<body>
<ol>
<li><a href="http://google.com" rel="external">External Link</a></li>
<li><a href="#foo">Action Foo</a></li>
<li><a href="#bar">Action Bar</a></li>
<li><a href="#baz">Action Baz</a></li>
<li><a href="mailto:[email protected]">Email Support</a></li>
</ol>
</body>
</html>
patch() replaces all links containing # (i.e., application-specific actions in my case) with a span element, makes all "external" links open in a new tab/window and doesn't seem to break custom protocol handling.
Answer
Is there a portable way to disable these tooltips?
Nope, other than workarounds like your example above.
Am I missing any obvious drawbacks to doing this in my particular situation?
You seem to be missing the fact that the whole situation is awkward. Why have links at all if you're going to make them look like buttons? Just use buttons. For that matter, why bother with links if you end up switching them out with spans anyway? Just use spans.
Is my attempt (see below) a reasonable way of accomplishing this?
It's not really reasonable as a general approach, because you're removing those anchor elements from the document, so any attached event listeners, expandos, etc. will be lost. It may work for your specific situation, but a more sane approach would be to not use links in the first place (see above).
If you're still determined to do something like this, at least don't replace the a element. Just get rid of its href attribute and set up an event listener as you did in your example. Now it's no longer a link, so it won't show up in the status bar (but it's still the same element, at least).