如何換行到下一行一DIV中，而不是去關閉屏幕

我有這顯示一個DIV作爲一個程式化的提示以下的jQuery（簡易工具提示插件[https://gist.github.com/monkeymonk/3028852]的一部分）：如何換行到下一行一DIV中，而不是去關閉屏幕

$(this).hover(function(e){ 
    content = (options.content != '') ? options.content : title 
    content = (options.useElement != '') ? $('#' + options.useElement).html() : content 
    $(this).attr('title', '') 

    if(content != '' && content != undefined){ 
     $('body').append('<div id="' + options.tooltipId + '">"' + content + '</div>') 
     $('#' + options.tooltipId).css({ 
      position: 'absolute' 
      , top: (e.pageY - options.yOffset) + 'px' 
      , left: (e.pageX + options.xOffset) + 'px' 
      , display: 'none' 
     }) 
     .fadeIn('fast') 
    } 
}

CSS：

#easyTooltip { 
    padding: 5px 10px; 
    border: 1px solid #227DD2; 
    background: #195fa4; 
    color: #fff; 
    white-space: pre-wrap; 
    width: 165px; 
    overflow: visible; 
}

顯示以下內容：

enter image description here

我如何修改CSS或功能，從而

~~白字周圍 easyToolTip DIV的寬度，而不是藍色框外溢出包裝如上圖所示？~~ （word-wrap: break-word固定它）
現在，當我移動我的鼠標藍色框隨它移動。如果我移動到右邊緣太多，藍色框會繼續從強制水平滾動條的屏幕上移開。無論鼠標移動的距離多遠，我如何強制藍框停留在邊緣，因此不顯示水平滾動條？

來源

2015-03-13 SearchForKnowledge

你可以限制提示（加上本身的寬度）的水平位置小於窗口的寬度：

var maxLeft = window.innerWidth - 165; 
var left = e.pageX + options.xOffset; 
if (left > maxLeft) 
    left = maxLeft;

另一種方法是嘗試jQuery用戶界面的Tooltip widget。

來源

2015-03-14 00:51:20

懸停代碼不適用於代碼。我添加了上面的代碼並用這個代替了我的代碼行：'.css（「left」，left +「px」）;' – SearchForKnowledge 2015-03-17 14:47:41

如何換行到下一行一DIV中，而不是去關閉屏幕

回答

相關問題