CSS/HTML: Disable link "hover" text

Question

You know how when you have your mouse over a link, in most browsers, it shows the link in the lower left corner (aka chrome) or in the status bar? How can I disable this?

Hildagarde

It seems that you cannot set the statusbar text manually. Read here: developer.mozilla.org/en/DOM/window.status – Dreadfully

For the record, I really hate it as a user when pages try to hide information like that. I urge you to reconsider. – Carpo

(Just feeling the need to comment on this old question post :) ) Even I, as someone who's often saying "don't ask why but answer the question", am not recommending this, it's only annoying for those who care and those who don't maybe won't even realize it's there, it's not very big after all. – Dagmar

Answer 1

The only way to do this is to remove the data in 'href', and change it to a javascript onclick where you set the window.location to the url you want.

<a href="http://www.stackoverflow.com/">Go To SO</a>

becomes

<a style="cursor: pointer" onclick="javascript: window.location = 'http://www.stackoverflow.com/';">Go To SO</a>

Missing

Doing it via JavaScript is probably the only way to disable the URL display, but this raises the question of why? URL display is a valid and important thing, and disabling it is not good for user experience. – Lusty

I agree, but it's what Bubby4j wanted. I've seen it done a lot (same as the no right-click javascript alert stuff), it's not a good practice, but you can't stop people from wanting to do it or actually doing it :) – Missing

Yes, I know it is useful to give OPs a sense of best-practices, but assuming the querent doesn't know what they are doing is underestimating them. I'm making a web doc in which the link mouseover text is distracting, thus I'm seeking this info. – Angulate

Answer 2

another idea: use a redirector.

Set the link to your own page (aspx) and in that page you do a Response.Transfer. When using aspx, you can use attributes (in the querystring) if you like, to use it for multiple links. This way the user still knows it is a link, but can't see the actual URL when hovering.

Ultimo

Answer 3

I got the same issue today .. and here is a out of the box way to solve it:

Just replace the <a> with a <span> and hide the address in a hidden component,
Then use Jquery to create the page redirect / Ajax.

HTML:

  <span class="fake-link" >
        <span class="url" style="display:none;">www.my-url.com</span>
        Go to My-URL page
    </span>

Jquery:

$(function(){
    $('.fake-link').on('click', function(e){
        var url = $(this).find('.url:first').html(); 
        window.location = url;
    });
});

Fictionist

Answer 4

Change the onclick event:

<a href="#" id="linkid">Link</a>

<script type="text/javascript">
function changeOnClick()  {
    document.getElementById("linkid").onclick=function(e) {
        location.href="http://www.your-site.com";
        return false;
    }
}
window.onload=changeOnClick;
</script>

You can change the "#" to whatever you want the status bar to show.

Seesaw

You should refresh before posting ;) – Missing