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

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

这是HTML：

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

这是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>

函数处理程序（e）{
e=e | | window.event；
var pageX=e.pageX；
}
var vert=window.innerWidth | | document.body.clientWidth；
如果（（pageX+320）>垂直）{
document.getElementsByClassName（“工具提示文本”）.css（“transform”、“translateX（-100%）”）；
}

---

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

因为我看到你从来没有听过任何事件来运行你的函数。请考虑此代码。

<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>

var tooltip=document.getElementsByClassName（“工具提示文本”）
函数处理程序（e）{
e=e | | window.event；
var pageX=e.pageX；
var vert=window.innerWidth | | document.body.clientWidth；
如果（（pageX+320）>垂直）{
css（“transform”，“translateX（-100%）”）；
}否则{
css（“transform”，“translateX（0）”）；
}
}
工具提示.addEventListener（'mouseenter'，handler）

正如我所见，您从未听任何事件来运行您的函数。请考虑此代码。

<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>

var tooltip=document.getElementsByClassName（“工具提示文本”）
函数处理程序（e）{
e=e | | window.event；
var pageX=e.pageX；
var vert=window.innerWidth | | document.body.clientWidth；
如果（（pageX+320）>垂直）{
css（“transform”，“translateX（-100%）”）；
}否则{
css（“transform”，“translateX（0）”）；
}
}
工具提示.addEventListener（'mouseenter'，handler）

我用事件侦听器尝试了您的版本，但似乎没有任何改变。我应该将eventListener添加到工具提示或函数中吗？我尝试了使用eventListener的您的版本，但它似乎没有改变任何东西。我应该将eventListener添加到工具提示还是函数？