使用 Javascript 根据光标位置更改 CSS

Question

我使用 CSS 在我的网站上添加了工具提示，但由于网站是响应式的，因此可以在屏幕外显示一些工具提示。所以我想在查看工具提示时根据光标位置调整工具提示位置。垂直工具提示对齐不是问题，所有工具提示都显示在“文本到悬停”的右侧，所以我只想在工具提示太靠近屏幕/窗口的右端时将其翻译到左侧。

这是 HTML：

<span class="tooltip-box">text-to-hover
  <span class="tooltip-text">Tooltip text here!</span>
</span>

这是 CSS：

.tooltip-box {
  position: relative;
  display: inline-block;
}
.tooltip-box .tooltip-text {
  visibility: hidden;
  width: 300px;
  text-align: center;
  position: absolute;
  z-index: 9999;
}
.tooltip-box:hover .tooltip-text {
  visibility: visible;
}

这是Javascript，如果光标太靠近屏幕末端，它应该确定是否将工具提示水平翻译-100%：

<script>
function handler(e) {
    e = e || window.event;
    var pageX = e.pageX;
}

var vert = window.innerWidth || document.body.clientWidth;
if((pageX+320)>vert) {
    document.getElementsByClassName("tooltip-text").css("transform", "translateX(-100%)");
}
</script>

我将 JS 放在每个页面的页脚中，但 JS 代码似乎没有改变任何东西。我对 JS 比较陌生，所以我假设我是问题所在。请告诉我，我的问题出在哪里:)

Answer 1

正如我所见，您从不听任何事件来运行您的功能。请考虑使用此代码。

<script>
var tooltip = document.getElementsByClassName("tooltip-text")
function handler(e) {
    e = e || window.event;
    var pageX = e.pageX;

    var vert = window.innerWidth || document.body.clientWidth;

    if((pageX+320)>vert) {
      tooltip.css("transform", "translateX(-100%)");
    } else {
      tooltip.css("transform", "translateX(0)");
    }
}
  
tooltip.addEventListener('mouseenter', handler)
</script>