双显示器上的默认 html 工具提示显示在不正确的位置

Question

我有一个简单的 HTML 代码如下，我有一台 ACER 笔记本电脑 (1290x1080)。当我运行时，chrome 浏览器上的 HTML 代码和 HTML 的工具提示在主监视器上运行良好。当我使用第二台显示器（LG 显示器）时，title 属性的工具提示显示在 chrome 浏览器和 MS Edge 上的错误位置。

Html 代码如下：

<a title="Hello world!">Hover over me</a>

请参阅下面的 link img 以查看更多详细信息，或者您可以单击此处：online code here

Error picture here

Answer 1

尝试使用 link 的容器元素并尝试根据它设置工具提示文本位置可能有助于解决问题。

示例：

<!DOCTYPE html>
<html>
<style>
.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  
  /* Position the tooltip */
  position: absolute;
  z-index: 1;
  bottom: 100%;
  left: 50%;
  margin-left: -60px;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
}
</style>
<body style="text-align:center;">

<h2>Top Tooltip</h2>
<p>Move the mouse over the text below:</p>

<div class="tooltip">Hover over me
  <span class="tooltiptext">Tooltip text</span>
</div>

</body>
</html>

参考：

滚动到 Positioning Tooltips

Answer 2

这不是您的代码错误。这是一个 Google Chrome 问题，发生在辅助屏幕或多屏幕设置（但不是主屏幕）上，并且出现在屏幕具有不同分辨率或不同比例时。查看来自 Google https://support.google.com/chrome/thread/60777371?hl=en

的支持论坛

关于 Chrome 菜单问题的另一个话题 https://support.google.com/chrome/thread/51112770?hl=en

这两个问题都是几周前更新时出现的。我也有这些问题。对我来说，新的 Microsoft Edge 也出现了，但没有 Google Chrome 那么糟糕。 Firefox 工作正常。似乎只发生在基于 Chromium 的浏览器上。

双显示器上的默认 html 工具提示显示在不正确的位置

Default html tooltip on double monitor is displayed at incorrect position

html

google-chrome

tooltip

microsoft-edge