如何约束工具提示/弹出式DIV的大小，使其不触发页面上的滚动条

编辑：响应意见，它听起来就像你试图让工具提示出现，而不影响现有元素的位置（从而导致主窗口上的滚动条）。

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

例如，你可以启动它隐藏：

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

然后，在你的鼠标悬停事件（或任何它被称为上），设置#tooltip的top和left CSS来在任何你想要的，并将显示切换到block。因为它绝对定位，它不会导致闪烁。

CSS：指定工具提示的width和height，向其添加overflow: hidden或overflow: scroll。

position: absolute工作正常，但当然，那么你将不得不指定工具提示的top和left位置。

在我看来，你需要的是在客户端浏览器窗口中的光标位置。然后，您可以进行计算以放置工具提示，使其不会跨越边界。

我在网上发现的是一篇短文，在不同浏览器中讨论这个问题：Mouse Cursor Position。也许这可以帮助你解决你的问题？

还有一些关于浏览器大小的更多信息可以在here找到。

希望它有帮助。

您可以使用位于0,0隐藏的DIV宽度和高度设置为100％，作为“标尺”测量屏幕

的客户区，如果你知道你的提示窗口的大小，你可以把它夹到客户端的窗口，或改变显示位置来接班，使其停留在边界

下面的一些代码中（未经测试，从另一个项目撕开，并更名为内联）

var toolTipDiv; //this is your tooltip div element 
//call AdjustToolTipPosition(window.event); 
function AdjustToolTipPosition(e) 
{ 
    var cpos = getPosition(e); 
    mouseX = cpos.x; 
    mouseY = cpos.y; 
    //Depending on IE/Firefox, find out what 
    //object to use to find mouse position 
    toolTipDiv.style.visibility = "visible"; 
    //backdrop 'yardstick' for client area measurement 
    var backdropDiv = document.getElementById("divBackdrop"); 
    //make sure floating box doesn't leave the screen 
    //we know box is 200x200 plus margins, say 215x215 
    if ((cpos.y + 215) > backdropDiv.offsetHeight) 
    { 
     cpos.y = backdropDiv.offsetHeight - 215; 
    } 
    if ((cpos.x + 215) > backdropDiv.offsetWidth) 
    { 
     cpos.x = backdropDiv.offsetWidth - 215; 
    } 
    toolTipDiv.style.left = cpos.x + "px"; 
    toolTipDiv.style.top = cpos.y + "px"; 
} 
//this function courtesy of 
//http://hartshorne.ca/2006/01/23/javascript_cursor_position/ 
function getPosition(e) 
{ 
    e = e || window.event; 
    var cursor = {x:0, y:0}; 
    if (e.pageX || e.pageY) 
    { 
     cursor.x = e.pageX; 
     cursor.y = e.pageY; 
    } 
    else 
    { 
     var de = document.documentElement; 
     var b = document.body; 
     cursor.x = e.clientX + 
      (de.scrollLeft || b.scrollLeft) - (de.clientLeft || 0); 
     cursor.y = e.clientY + 
      (de.scrollTop || b.scrollTop) - (de.clientTop || 0); 
    } 
    return cursor; 
} 

它可能会设置一个幽灵transp不是你整个页面/视口大小的DIV。然后，您可以在其中“粘贴”工具提示DIV，从而提供CSS float：right属性。这会为您提供正确的顶部/左侧工具提示的角落度量，用于最终的工具提示渲染。

编辑：这应该只对'边缘情况'的情况下完成。

您可以尝试确定指针的位置，并且如果它位于视口的右侧1/4（或您确定的任何区域），请将工具提示放在指针的左侧，否则将其放到对。

您提到文字可能会有所不同，但它可能会变得非常大吗？它可以占用整个屏幕本身吗？最有可能的是，它会有一个最大尺寸，所以在决定使用什么阈值来决定提示应该在右边还是左边时要考虑这一点。

然后，绝对放置您的tip div，并且要安全，给它一个max-height和max-width属性。如果文字变大，请在CSS中输入overflow: scroll。

今年早些时候我有这个问题。我固定它的方式：

1. 我认为垂直滚动是好的，但是卧式滚动是没有的。 （总是有足够的空间，以便垂直滚动条不会影响我的布局）
2. 我修正了工具提示与目标相对的垂直位置。 （工具提示的顶部始终位于锚点底部以下5px）
3. 工具提示的左侧是根据屏幕大小设置的。如果整个工具提示可以放在一条线上，就很酷。否则，我限制了最大宽度并将其包裹。

有一件事帮助我实现它，这是Quirksmode的Find Position文章。

我的解决方案可能并不完全符合您的要求，但至少看看Quirksmode链接，它的优点。

希望有帮助！

更好的想法可能是将工具提示放置在元素的左侧或右侧，具体取决于页面的哪一侧更近。我的工具提示宽度固定，填充内容并在需要时使其可见，然后根据鼠标位置对其进行定位。下面是的OnMouseMove事件处理程序的重要组成部分启用提示时：

if (!e) var e = window.event; 
if(e) { 
    var posx = 0; 
    var posy = 0; 
    if (e.pageX || e.pageY) { 
     posx = e.pageX; 
     posy = e.pageY; 
    } 
    else if (e.clientX || e.clientY) { 
     posx = e.clientX + document.body.scrollLeft 
      + document.documentElement.scrollLeft; 
     posy = e.clientY + document.body.scrollTop 
      + document.documentElement.scrollTop; 
    } 
    var overflowX = (document.body.clientWidth + document.body.scrollLeft + document.documentElement.scrollLeft) - (posx + 25+ tooltip.clientWidth); 
    if(overflowX < 0) posx -= 25+ (tooltip.clientWidth); 
    var overflowY = (document.body.clientHeight + document.body.scrollTop + document.documentElement.scrollTop) - (posy + 15+ tooltip.clientHeight); 
    if(overflowY < 0) posy += overflowY; 
    tooltip.style.left=(10+posx); 
    tooltip.style.top=(10+posy); 
} 

这里是我最后使用的代码，它似乎是工作。

function display_popup(s) 
{ 
    var popup = document.getElementById("popup"); 
    popup.innerHTML = s 
    //viewport_height = $(document).height() doesn't work 
    viewport_height = get_viewport_size()[1] // does this factor in scrollbar? 
    mytop = $(current_element).offset().top + $(current_element).height() + 4 
    scroll_offset_y = $(document).scrollTop() 
    y_in_viewport = mytop - scroll_offset_y 
    if (y_in_viewport < viewport_height) // are we even visible? 
    { 
     // Display the popup, but truncate it if it overflows 
     // to prevent scrollbar, which shifts element under mouse 
     // which leads to flicker... 
     popup.style.height= "" 
     popup.style.display = "block"; 
     if (y_in_viewport + popup.offsetHeight > viewport_height) 
     { 
      overflow = (y_in_viewport + popup.offsetHeight) - viewport_height 
      newh = popup.offsetHeight - overflow 
      newh -= 10 // not sure why i need the margin.. 
      if (newh > 0) 
      { 
       popup.style.height = newh 
      } 
      else 
      { 
       popup.style.display = "none"; 
      } 
     } 
     popup.style.left = $(current_element).offset().left + 40 
     popup.style.top = mytop 
    } 
} 
function get_viewport_size() 
{ 
    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; 
    } 
    return [myWidth, myHeight]; 
}