Hide anchor display on status bar

Question

I am creating a jQuery UI webapp in which I use a fixed "status bar" at the bottom of the window to show small snippets of relevant information as and when required. The information appears in the bottom left hand corner of the status bar. All good thus far. The issue that I run into is this - I have tons of anchors in my webapp. For instance, on the left hand side of the app I show a jstree treeview which has many

<a href='#'>...

anchor elements. What is currently happening is that when the user hovers over such a treeview item (or for that matter another anchor) the browser (Google Chrome) very helpfully pops up the link URL in the bottom left hand corner. I suppose other browsers do similar things but right now I am testing only with Chrome and even in the longer term it is the two webkit browsers that really matter.

Hmmm... that helpful link URL popup is handy and useful in a "normal" web page but it is completely out of place in my webapp. Is there any way I can suppresss it? From all the reading I have done I have gathered that such suppression is blocked by most browsers since it would be a potential security loophole.

Sure, I could get my own "hint text" to appear elsewhere but that would be rather incongruous. Is there anything I can do here or am I stuck with the popup? I'd much appreciate any help.

Answer 1

If you use <a> elements, the browser will always show the address on hover, as you said mainly for security reasons.

However, you can use <span> elements that work as links, so the browser don't show them on hover, see my working demo.