如何約束工具提示/彈出式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和left CSS來在任何你想要的，並將顯示切換到block。因爲它絕對定位，它不會導致閃爍。

Answer 2

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

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

Answer 3

在我看來，你需要的是在客戶端瀏覽器窗口中的光標位置。然後，您可以進行計算以放置工具提示，使其不會跨越邊界。

我在網上發現的是一篇短文，在不同瀏覽器中討論這個問題：Mouse Cursor Position。也許這可以幫助你解決你的問題？

還有一些關於瀏覽器大小的更多信息可以在here找到。

希望它有幫助。

Answer 4

您可以使用位於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; 
} 

Answer 5

它可能會設置一個幽靈transp不是你整個頁面/視口大小的DIV。然後，您可以在其中「粘貼」工具提示DIV，從而提供CSS float：right屬性。這會爲您提供正確的頂部/左側工具提示的角落度量，用於最終的工具提示渲染。

編輯：這應該只對'邊緣情況'的情況下完成。

Answer 6

您可以嘗試確定指針的位置，並且如果它位於視口的右側1/4（或您確定的任何區域），請將工具提示放在指針的左側，否則將其放到對。

您提到文字可能會有所不同，但它可能會變得非常大嗎？它可以佔用整個屏幕本身嗎？最有可能的是，它會有一個最大尺寸，所以在決定使用什麼閾值來決定提示應該在右邊還是左邊時要考慮這一點。

然後，絕對放置您的tip div，並且要安全，給它一個max-height和max-width屬性。如果文字變大，請在CSS中輸入overflow: scroll。

Answer 7

今年早些時候我有這個問題。我固定它的方式：

1. 我認爲垂直滾動是好的，但是臥式滾動是沒有的。 （總是有足夠的空間，以便垂直滾動條不會影響我的佈局）
2. 我修正了工具提示與目標相對的垂直位置。 （工具提示的頂部始終位於錨點底部以下5px）
3. 工具提示的左側是根據屏幕大小設置的。如果整個工具提示可以放在一條線上，就很酷。否則，我限制了最大寬度並將其包裹。

有一件事幫助我實現它，這是Quirksmode的Find Position文章。

我的解決方案可能並不完全符合您的要求，但至少看看Quirksmode鏈接，它的優點。

希望有幫助！

Answer 8

更好的想法可能是將工具提示放置在元素的左側或右側，具體取決於頁面的哪一側更近。我的工具提示寬度固定，填充內容並在需要時使其可見，然後根據鼠標位置對其進行定位。下面是的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); 
} 

Answer 9

這裏是我最後使用的代碼，它似乎是工作。

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]; 
}