如何显示浏览器在网页中生成的链接悬停工具提示？

Question

当我们将鼠标悬停在链接上时，是否可以显示或使用浏览器生成的工具提示的内容？ [请参阅GIF]

我有following code [由于与问题无关，因此跳过了此代码] ：

左侧的列包含页面跳转链接或永久链接； <a href='#CEO'>CEO</a>会将右边的内容跳到具有id='CEO'个链接的部门中，只需滚动到右边的相关部分即可。

我正在尝试在右侧列中显示页面的URL。

在正常的网页window.location.href中会为我提供所需的结果https://website.com/pagename.html#CEO。但这是codepen，窗口URL不变，因此window.location.href给了我https://website.com/pagename.html，它跳过了#CEO部分 由于window.location.href所显示的结果不能满足我的要求，因此我不得不使用javascript手动添加#ID部分。

这让我开始思考是否可以通过某种方式使用JavaScript提取显示在浏览器状态栏中的浏览器工具提示？使用某些javascript方法可以提取状态栏内容并将其显示在我们的网页上吗？每次将鼠标悬停在链接状态栏上时，请查看GIF，向我们显示我要定位该链接的相应页面位置，并获取如果该链接被悬停在浏览器将显示在状态栏中的内容。

考虑一下，我有3个链接，我需要一个代码来提取并显示三个链接的状态栏中浏览器显示的悬停URL。 能做到吗？

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>

Answer 1

坏消息：无法完成：

Get current page http status from javascript