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

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