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"，该方法提供一个对象，该对象具有top、right、left和from字段，这些字段提供元素到视口顶部、右侧、左侧和底部的距离。如果您的元素在元素内部完全可见，则所有四个字段都将是正数，否则意味着它部分不可见，例如，"-10“的左字段表示您的元素的长度约为10px的长度超出了视口的左边缘。

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

tooltip.style.left = 20