如何解决双监视器上的默认html工具提示显示在错误的位置
我有一个下面的简单HTML代码，我有一个ACER笔记本电脑（1290x1080）。当我在chrome浏览器上运行HTML代码时，HTML的工具提示可以在主监视器上正常工作。当我使用第二个监视器（LG监视器）时，标题属性的工具提示在chrome浏览器和MS Edge上显示在错误的位置。
这样的HTML代码：
<a title="Hello world!">Hover over me</a>
请参见以下链接img以了解更多详细信息，或者您可以单击此处：online code 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>
参考：
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。