jQuery UI工具提示定位問題

我對jQuery UI的工具提示有定位問題。我寧願不使用jQuery UI，但我正在使用的項目已經在整個過程中使用它，並且已經請求我嘗試並使用它，而不是整合我的首選選項qTip2。jQuery UI工具提示定位問題

當出現工具提示時，它會導致一個垂直滾動條。我將工具提示集中放置在目標上方，並且符合我的要求，排除此問題。

$(function() { 
$(document).tooltip({ 
show: false, 
    hide: false, 
    position: { 
    my: "center bottom-20", 
    at: "center top", 
    using: function(position, feedback) { 
     $(this).css(position); 
     $("<div>") 
     .addClass("arrow") 
     .addClass(feedback.vertical) 
     .addClass(feedback.horizontal) 
     .appendTo(this); 
    } 
    } 
}); 
});

我可以看到提示被定位在頂部：-600px我以爲是什麼原因造成的滾動條出現。

我試過更改/刪除工具提示的位置，但它沒有任何影響。我已經嘗試刪除部分CSS來查明問題，它似乎與填充（任何）或高度（最小，最大或固定）有關。

雖然刪除填充和高度解決了這個問題，但它顯然使工具提示看起來有點...瘦。我想弄清楚問題是什麼以及如何繞過它，所以我可以設計工具提示。

我當前的CSS（包括我可以看到的高度和填充值導致問題）如下（也有箭頭設置的樣式，我忽略了它們，因爲我可以看到它們不會導致任何問題）：

.ui-tooltip { 
    z-index:10; 
    width:150px; 
    padding:10px; 
    min-height:20px; 
    max-width:100%; 
    font-size:0.875em; 
    text-align:center; 
    border-radius: 20px; 
    color:#707070; 
    background:#fffdc2 url(../img/fade.png) repeat-x; 
    font-family: 'Droid Sans', sans-serif; 
    text-shadow: 1px 1px #ffffff; 
    -webkit-border-radius: 5px; 
    -moz-border-radius: 5px; 
    border-radius: 5px; 
    border:1px solid #e1e0aa;}

我知道jQuery UI的有an open issue about connectors，所以我沒有任何定位設置測試，它並沒有區別了這一點。

我看到this issue提到了幾次，但它沒有關聯，因爲我沒有qTip或其他任何東西。我設置了一個JS fiddle here。

我會很感激任何幫助或建議。

謝謝！

來源

2013-05-30 Amy

我看不到任何滾動條出現？ – gkalpak

@ExpertSystem在JS小提琴中，不存在其他頁面元素丟失的情況。我想演示如何設置它，但在回答您的評論時，我開始添加我的標記的其餘部分（已將其取出，因爲頁面響應時它會更改爲適合JS小提琴窗口，因此您將無法看到我的問題）。我可以看到滾動條僅在頁面上有足夠內容才能保證一個顯示時出現......額外的高度或填充將它推到邊緣上。煩人的是，這使得滾動條閃爍。 – Amy

@ExpertSystem我已通過將位置設置爲絕對解決了此問題。 – Amy

如果我理解正確你所描述的問題，增加了垂直滾動條是什麼，因爲一個額外的div（「＃UI的工具提示-XX」）被附加到文件的身體與position: relative，這會佔用額外的空間增加body的scrollHeight屬性（並導致滾動條出現）。如果這與您的HTML其餘部分（我沒有處理過的測試）「兼容」，您可以通過將工具提示的position屬性設置爲absolute（這不會影響其容器的總高度。

// Add this in your CSS 
.ui-tooltip, .arrow:after { 
    position: absolute; 
    ....

（根據你的頁面上的HTML的其餘部分，產生額外的修改可能是必要的。）

還參見本short demo。

來源

2013-05-30 15:41:57 gkalpak

有同樣的問題;像魅力一樣工作。非常感謝！！ – Pere

我的應用程序（其中有工具只是設置'position：absolute'是不夠的 - 我還必須給工具提示一個初始的屏幕頂部和左側位置，因爲它只在創建後才被定位：

.ui-tooltip 
{ 
    position: absolute; 
    top: 100px; left: 100px; 
}

來源

2014-10-22 13:51:19

jQuery UI工具提示定位問題

回答

相關問題