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

HTML & CSS 工具提示保持在屏幕上

HTML & CSS Tooltip Keeping On Screen

html

javascript

css

tooltip