Javascript 如何基于目标元素动态更改绝对工具提示的位置

我试图制作一个工具提示，它基本上显示一个表（在下面的示例中，我使用了大量文本）。 但是，当您将鼠标悬停在接近屏幕角落的目标元素上时，我想更改工具提示的位置

这是你的电话号码

$（“strong”）。在（“鼠标悬停”，函数（）上{
变量$this=$（this），
strongText=$this.text（）；
$tooltipContainer.show（）；
$tooltipContainer.append（“”+strongText+“”）；
}).on（“mousemove”，函数（mousePos）{。。。

如果存在如下重叠，您可以稍微更改

鼠标移动

代码以更新

顶部

位置。检查演示-

---

您是否尝试过使用像[Tether][1]这样的库来为您处理定位？它非常轻，只有23kb。[1]：@michael Thank buddy，我想至少不使用任何库/插件。但我会尝试检查它：）

$("strong").on("mouseover", function(){
var $this = $(this),
strongText = $this.text();
$tooltipContainer.show();
$tooltipContainer.append('<span>'+ strongText + '</span>');
}).on("mousemove", function(mousePos){...

on("mousemove", function(mousePos){
    var overlap = mousePos.pageY + posSrollY + $tooltipContainer.height() - $(window).height() - $(window).scrollTop();
    $tooltipContainer.css({
        left: mousePos.pageX,
        top: mousePos.pageY + posSrollY - ( overlap > 0 && overlap )
    });
})