Javascript 绝对定位元素，不退出视口

我有一个工具提示元素，当鼠标悬停在某些元素上时会显示它

我希望工具提示按预期放置在法线元素上方，但如果工具提示太大并从窗口逃逸，我需要避免这种情况发生

我怎样才能拥有一个绝对定位且从不在视图外显示的元素

---

编辑：最好使用CSS…

遵循此处介绍的想法：

我想：

function elementInViewport(el) {
  var top = el.offsetTop;
  var left = el.offsetLeft;
  var width = el.offsetWidth;
  var height = el.offsetHeight;

  while(el.offsetParent) {
    el = el.offsetParent;
    top += el.offsetTop;
    left += el.offsetLeft;
  }

  return (
    top >= window.pageYOffset &&
    left >= window.pageXOffset &&
    (top + height) <= (window.pageYOffset + window.innerHeight) &&
    (left + width) <= (window.pageXOffset + window.innerWidth)
  );
}

var tooltip = $(".tooltip");
tooltip.show(); //we must make it visible in order to perform the test on the next line
if(!elementInViewport(tooltip)) {
  tooltip.hide();
}

函数元素INVIEWPORT（el）{
var top=标高偏移；
var left=el.offsetLeft；
var宽度=el偏移网络宽度；
var高度=el离地高度；
while（el.offsetParent）{
el=el.offsetParent；
顶部+=标高偏移；
左+=el.offsetLeft；
}
返回(
顶部>=window.pageYOffset&&
左>=window.pageXOffset&&
（顶部+高度）如果工具提示跟随鼠标，则只需将宽度设置为其当前宽度-宽度的一半+鼠标离开左侧或右侧的像素数。我希望其宽度没有改变。我应该更清楚-不是它的宽度太大，而是当您将鼠标悬停在页面最右/左/上..等处的元素上时-太大ltip显示在视口之外。那么，你是说工具提示不显示，还是说工具提示自身位置合适？你需要使用JS来获得一个好的解决方案。