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 exam

Solution 1:

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

Solution 2:

<button onclick="window.open('yoururlhere.html','_self')">your link text here</button>

Note that this treats ctrl-clicks as ordinary clicks and disables right-clicking. I don't know about middle clicks.

You could also use "a" and merely replace the href with the onclick as in the code above, but when I tried that my "a:hover" styling stopped working. Apparently an "a" without an href is considered unhoverable, at least in Firefox. So I switched to "button" and "button:hover" styling and all was well.

I understand this solution will be considered bad practice, but in some situations, eg the site I'm making made up mainly of full screen photos, aesthetics trumps principles.

Solution 3:

The tooltip provides an indication to the user where a link will take them if clicked. It's part of the standard browser user experience and will be expected by users of your site. Changing this expectation because you don't think it looks nice will probably lead to a poor user experience. Any content shown in that area will be visible as soon as the user stops hovering over a link tag.

I know that any link that doesn't tell me where it is going looks pretty suspicious to me.

Solution 4:

try this

$(this).removeAttr("href");  
$(this).click(function(){}).mouseover(function(){.........}).etc

Solution 5:

This is what I do with jQuery:

//remove status bar notification...
        $('a[href]').each(function(){
            u = $(this).attr('href');
            $(this).removeAttr('href').data('href',u).click(function(){
                self.location.href=$(this).data('href');
            });
        });