1

Is there a way to display or use the content of tooltip that a browser generates when we hover over a link? [See the GIF]

I had the following code [Skipped inclusion of this code as it's irrelevant to the question]:

The column to the left contains page jump links or permalinks; <a href='#CEO'>CEO</a> which jumps the content on the right to the division having id='CEO'the links just scroll to the relevant part on the right.

In the column on the right I'm trying the display the URL of the page.

enter image description here

In a normal webpage window.location.href would have provided me the required result https://website.com/pagename.html#CEO. But this is codepen and the window URL doesn't change so window.location.href gave me just https://website.com/pagename.html it skipped the #CEO part As the result displayed by window.location.href wasn't giving me the required result so I had to manually add the #ID part using javascript.

This got me thinking if there is some way we could extract the browser tooltip which is displayed in the browser's status bar using javascript? Some javascript method using which we can extract the statusbar content and display it on our webpage? See the GIF everytime we hover over a link status bar shows us the corresponding page location I want to target the link and get the content that the browser would have displayed in status bar if that link was hovered.

Consider I have 3 links and I need a code to extract and display the on-hover URL shown by the browser in status bar of the three links. Can this be done?

function getBrowserToolTip(id) {
  var ttSpan = id + 'Span';
//var tt = document.getElementById(id).hover.contentStatusBar.href;
  document.getElementById(ttSpan).innerHTML = " " + "tt";
}

getBrowserToolTip('home');
getBrowserToolTip('users');
getBrowserToolTip('tags');

/* I have commented out the 
"var tt = document.getElementById(id).hover.contentStatusBar.href;" part as it's not valid */
body {
  height: 100vh; margin: 0; padding: 1em 2em;
  background: #222; color: #ddd; font-family: monospace;
}

a {color: aqua;}
a:hover {color: red}

span {color: yellow}
<div>
  <a id="home" href="https://stackoverflow.com/">StackOverflow</a><br>
  <div>On hovering ☝️ link your browser displays:<span id="homeSpan"></span></div><br>
  <a id="users" href="https://stackoverflow.com/users">StackOverflow Users</a><br>
  <div>On hovering ☝️ link your browser displays:<span id="usersSpan"></span></div><br>
  <a id="tags" href="https://stackoverflow.com/tags">StackOverflow Tags</a><br>
  <div>On hovering ☝️ link your browser displays:<span id="tagsSpan"></span></div><br>
  <a id="teams" href="https://stackoverflow.com/teams">StackOverflow Teams</a><br>
  <div>On hovering ☝️ link your browser displays:<span id="teamsSpan"> https://stackoverflow.com/teams</span></div>
</div>
YourPalNurav
  • 1,204
  • 9
  • 40
  • Possible duplicate of [How to display text in the browser status bar?](https://stackoverflow.com/questions/1444770/how-to-display-text-in-the-browser-status-bar) – A. Meshu Feb 16 '19 at 15:35
  • I don't want to display text in the status bar. I want to extract the text from status bar and display it on my page. – YourPalNurav Feb 17 '19 at 01:48

1 Answers1

0

Bad news: it can't be done:

Get current page http status from javascript

io_io
  • 3
  • 1
  • 3