如何确保工具提示停留在浏览器可见区域内？

Question

我正在学习如何根据w3schools教程创建工具提示。

我面临的一个问题是，当悬停的文字靠近浏览器边缘并且工具提示显示在可见区域之外时，工具提示的可见性。

是否有防止这种情况的标准方法（欢迎任何方式（CSS，JS，...））？
我现在的想法是根据屏幕的大小和工具提示锚点的位置来计算工具提示的坐标-但我想避免重新发明轮子。

向上或向下扩展的工具提示就足够了- 也许可以进行“完全可见”的检查以决定方向？这类似于SO中的工具提示中的内容：

Answer 1

您需要计算工具提示的位置是否在窗口之外。在下面的示例中，我只是将类添加.bottom到.tooltiptext本例中。

计算公式为：

$('.tooltip').offset().top - $('.tooltiptext').height() < 0

在这种情况下，我们应该添加该类。

完整的例子：

$('.tooltip').offset().top - $('.tooltiptext').height() < 0

$('.tooltip').on('mouseenter', function() {
  var $this = $(this);
  var tooltip = $(this).find('.tooltiptext');
  var offset = $this.offset();

  tooltip.toggleClass('bottom', offset.top - tooltip.height() < 0);
  // - just for case you want to change the default behavior - tooltip.toggleClass('top', $(window).height() + tooltip.height() < 0);
});

.footer {
  position: absolute;
  bottom: 0;
  text-align: center;
  padding-bottom: 10px;
  width: 100%;
}

http://output.jsbin.com/nemebob

我让你将箭头方向更改为顶部。