HTML 和 CSS 工具提示保留在屏幕上

Question

我需要帮助保持我的CSS工具提示在屏幕上我的网站。不幸的是，它对于靠近屏幕边缘的网站来说太大了，对于任何移动设备来说也太大了，并且没有正确定位(可能是因为我计划在每个工具提示中添加非常大的描述)。我想只是使用CSS，但愿意使用JS，因为我开始认为这可能是唯一正确的方法，但我有很多麻烦弄清楚如何使它工作。

我基本上是从另一个网站复制的代码，如果它能帮助你更好地理解我的代码:https://www.w3schools.com/css/css_tooltip.asp

我能在网上找到的唯一结果是关于工具提示在屏幕上的中心，奇怪的是没有工作，代码使用SCSS，我没有经验，宁愿不使用。

以下是我的部分HTML和CSS代码:

body {
overflow-x: hidden;
overflow-y: scroll;
}
.ref {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}
.ref .versekjv {
visibility: hidden;
width: 250px;
background-color: black;
color: #fff;
text-align: left;
padding: 5px;
border-radius: 6px;
z-index: 98;
position: absolute;
top: 100%;
left: 50%;
margin-left: -125px;
flex-direction: column;
}
.ref .versekjv::after {
content: " ";
position: absolute;
bottom: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent transparent black transparent;
}
.ref:hover .versekjv {
visibility: visible;
}
.redletters {
color:red; 
}
@media screen and (max-width:1000px){ 
.ref .versekjv {
font-size: 1rem;
max-width: 20rem;
position: fixed;
bottom: auto; top: 13%;
left: 78%;
text-align: left;
transform: translate(-50%);
transform: translateX(-50%);
white-space: normal;
z-index: 98;
}
.ref .versekjv::after {
border-color: transparent;
}
}

<li class="box"><a>
<div class="innerbox">Reference</div>
<div class="innerbox"><u class="ref">Reference<span class="versekjv"><b>Bible Book</b><p><i>#</i> Verse Text</p></span></u></div>

<div class="innerbox"><u class="ref">Reference<span class="versekjv"><b>Bible Book</b><p><i>#</i> Verse Text</p></span></u>; <u class="ref">Reference<span class="versekjv"><b>Bible Book</b><p><i>Verse Num.</i> Verse Text</p></span></u></div>
</a></li>

非常感谢你的帮助!

Answer 1

首先，需要获得工具提示的DOM对象

let tooltip = document.querySelector(".ref .versekjv")

然后，你可以使用js方法"getBoundingClientRect"，它给你一个对象，有顶部，右边，左边和底部的字段，给你的元素从上，右，左和底部的距离。如果你的元素在元素内部是完全可见的，那么所有四个字段都是正数，否则就意味着它是部分不可见的，例如左字段为"-10"意味着大约10px的元素长度超出了视口的左边缘。

你能做的就是你总是检查顶部，左侧，…元素的距离，如果它们是负数，手动更改它们，从而正确定位元素，可以这样实现:

tooltip.style.left = 20