13

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:

http://i.imgur.com/0dAxc.png

Questions

  1. Is there a portable way to disable these tooltips?
  2. Am I missing any obvious drawbacks to doing this in my particular situation?
  3. 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:support@example.org">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.

Damien_The_Unbeliever
  • 234,701
  • 27
  • 340
  • 448
TjB
  • 133
  • 1
  • 5
  • http://stackoverflow.com/questions/876390/reliable-cross-browser-way-of-setting-status-bar-text – j08691 May 06 '12 at 04:44

5 Answers5

4

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

Dagg Nabbit
  • 75,346
  • 19
  • 113
  • 141
  • Your last suggestion works perfectly. Didn't know you could do that with empty `a` elements. – TjB May 06 '12 at 05:13
  • If you have control over the markup, I'd seriously consider making them not be links in the first place. For instance actions that change data in your application should always happen by POST rather than GET, even in intranet apps... if that's what these are, they should be buttons for sure. The status bar thing itself is really not a significant problem, but it might be an indication of poor design. – Dagg Nabbit May 06 '12 at 09:48
  • Thanks for your suggestions. Buttons make more sense semantically in most of my use cases. I will play around with this. – TjB May 06 '12 at 15:04
3
<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.

tommie
  • 31
  • 1
1

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.

Bill
  • 25,119
  • 8
  • 94
  • 125
  • Thanks for for providing an answer. I realize that this isn't a good idea 99% of the time, however, in my case, most of these links are actions that look like buttons and other windows UI elements. My app is supposed to act like a desktop app, but in the browser. I think in this instance, it's okay to disable the tooltip only for those elements for aesthetic reasons. External links and custom protocols are left untouched. – TjB May 06 '12 at 04:45
  • It actually isn't a good idea 100% of the time, that's why browsers have stopped letting people muck with that status bar content at all. Why don't you just leave it be and see if anybody complains? – Bill May 06 '12 at 04:51
  • It's not only an aesthetic issue, though. Take a look at this screenshot from the link provided by j08691 above: http://i.imgur.com/mlnYN.png The tooltip is blocking site content. In the case of a web application that implements a status bar of its own, it's a legit reason to disable it for application-specific actions. Again, external links are untouched. – TjB May 06 '12 at 05:02
  • It's your app so you can obviously do what you think is best. Generally speaking, breaking the way that the web works for one site is frowned upon. In the example you provided, the user just needs to move their mouse a few pixels over and all the content is visible again. Your site information is not permanently obscured. – Bill May 06 '12 at 05:05
  • 1
    People seem to forget that browsers are a good low-cost platform for delivery internal corporate applications, so disabling the status tooltip isn't going to "break the web 100% of the time". My application has a target audience of about 25 people, for example. The status tooltip is ugly and my users don't care where the link takes them because the page isn't designed like a 'traditional web page'. It's not just the link text either, it's the page load status that I'd like to get rid of. I think making it impossible to disable it is stupid. When is removing choice ever a good idea? – Jamie Carl Sep 25 '12 at 22:52
1

try this 

$(this).removeAttr("href");  
$(this).click(function(){}).mouseover(function(){.........}).etc
andrewsi
  • 10,807
  • 132
  • 35
  • 51
user1234396
  • 11
  • 1
1

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');
            });
        });
Daantje
  • 2,406
  • 25
  • 26
  • No, example is only normal mouse click. Change click() to mousedown() to catch all mouse buttons I think. Not tested... This maybe helps; http://stackoverflow.com/a/2725963/536590 – Daantje Jan 07 '15 at 13:10