javascript - 不逃逸视口的绝对定位元素

Question

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

我希望工具提示按预期定位在普通元素上方，但在工具提示太大并逃离窗口的情况下，我需要不要发生这种情况。

我怎样才能拥有一个绝对定位并且永远不会显示在视野之外的元素？

编辑：最好使用 CSS ...

Answer 1

遵循此处提出的想法：如何判断 DOM 元素在当前视口中是否可见？

我得到了：

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();
}