如何约束工具提示/弹出式DIV的大小,以便它不会触发页面上的滚动条

Question

鼠标悬停在元素上并显示提示.提示溢出页面,触发滚动条,这会更改布局,以便触发提示的基础元素不再位于鼠标指针下方,因此提示会消失.

尖端消失,因此滚动条消失,现在鼠标再次在元素上方.

洗涤,冲洗,重复.

如果我可以确保提示不是太大以致触发滚动条,那将解决我的问题.

编辑:阅读评论后,有些事情需要澄清:div包含的文本可能会有所不同.如果可以,我想展示所有文字.div的位置需要靠近鼠标尖端的元素.所以关键是,我需要知道是否截断文本.

我确实找到了这个链接:
http://www.howtocreate.co.uk/tutorials/javascript/browserwindow
,其中包含了这个拼图,确定了浏览器窗口的大小:

function alertSize() {
  var myWidth = 0, myHeight = 0;
  if( typeof( window.innerWidth ) == 'number' ) {
    //Non-IE
    myWidth = window.innerWidth;
    myHeight = window.innerHeight;
  } else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
    //IE 6+ in 'standards compliant mode'
    myWidth = document.documentElement.clientWidth;
    myHeight = document.documentElement.clientHeight;
  } else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
    //IE 4 compatible
    myWidth = document.body.clientWidth;
    myHeight = document.body.clientHeight;
  }
  window.alert( 'Width = ' + myWidth );
  window.alert( 'Height = ' + myHeight );
}

Answer 1

编辑：作为对评论的回应，听起来您正在尝试显示工具提示，而不影响现有元素的位置（从而导致主窗口上出现滚动条）。

如果是这种情况，您需要将工具提示的位置定义为绝对位置，因为这会将其从元素流中删除（因此当它出现时，它不会将页面的其余部分向下推）。

例如，您可以隐藏它：

#tooltip {
  position: absolute;
  height: 100px;
  width: 200px;
  border: 1px solid #444444;
  background-color: #EEEEEE;
  display: none;
}

然后，在鼠标悬停事件（或任何调用的事件）上，将#tooltip 的top和leftcss 设置为您想要的位置，并将显示切换为block. 由于它是绝对定位的，所以不会引起闪烁。