双监视器上的默认html工具提示显示在错误的位置

编程问答 2022-11-06

问题描述

我有一个下面的简单HTML代码，我有一个ACER笔记本电脑（1290x1080）。当我在chrome浏览器上运行HTML代码时，HTML的工具提示可以在主监视器上正常工作。当我使用第二个监视器（LG监视器）时，标题属性的工具提示在chrome浏览器和MS Edge上显示在错误的位置。

这样的HTML代码：

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

请参见以下链接img以了解更多详细信息，或者您可以单击此处：online code here

Error picture here

解决方法

这不是您的代码上的错误。这是一个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的浏览器上。

,

尝试使用容器元素作为链接，并尝试根据其设置工具提示文本位置，可能有助于解决问题。

示例：

<!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

google-chromehtmlmicrosoft-edgetooltip