jQuery UI araç ipucu konumlandırma sorunu

Question

jQuery UI araç ipuçlarıyla bir konumlandırma sorunum var. JQuery kullanıcı arayüzünü kullanmamayı tercih ederim, ancak üzerinde çalıştığım proje zaten onu kullanıyor ve tercih ettiğim seçenek olan qTip2'yi entegre etmektense onu denemeyi ve kullanmayı tercih ettim.

Araç ipucu görüntülendiğinde, dikey kaydırma çubuğuna neden olur. Araç ipucunu hedefin üzerinde merkezi olarak konumlandırıyorum ve istediğim gibi bu sorunu hariç tutuyorum. Ben ipucu üstünde konumlandırılmış ediliyor görebilirsiniz

$(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 ki ben varsayalım kaydırma çubuğu görünmesini nedeni budur.

Araç ipucunun konumunu değiştirmeyi/kaldırmayı denedim, ancak herhangi bir etkisi olmadı. Sorunu saptamak için CSS parçalarını çıkarmayı denedim ve dolgu (herhangi) veya yükseklik (min, maks veya sabit) ile ilgili görünüyor.

Dolgu ve yükseklik kaldırılırken sorun giderilse de, araç ipucu biraz bozuk görünüyor ... Sıska. Sorunun ne olduğunu ve etrafındaki yolu öğrenmek isterim, bu yüzden araç ipucunu şekillendirebilirim.

Geçerli CSS (görebildiğim yükseklik ve dolgu da dahil olmak üzere) şu şekildedir (oklar için ayarlanmış stiller de vardır;):

.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 biliyorum, bu yüzden herhangi bir konumlama ayarlarında olmadan test ettik ve bu hiçbir fark yaptı.

Birkaç kez bahsettiğim this issue'u gördüm, ancak qTip veya başka bir şey içermediğinden alakalı değildi. Bir JS fiddle here.

Herhangi bir yardım veya öneriniz için teşekkür ederiz.

Teşekkürler!

Answer 1

Sorun olarak tanımladığınız şeyi doğru olarak anlarsam, ek bir div ("# ui-tooltip-XX") eki position: relative ile eklenmiş olduğundan, bu durumda dikey kaydırma çubuğu eklenir; Vücudun scrollHeight özelliği (ve kaydırma çubuğunun görünmesine neden oluyor). Bu, HTML'inizin geri kalanıyla birlikte "uyumlu" ise (bu, test etmek için elimde yok) araç çubuğunun position özniteliğini absolute olarak ayarlayarak (bu, içeriğinin toplam yüksekliğine katkıda bulunmaz) bu sorunu atlatabilirsiniz. .

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

(sayfanızdaki HTML geri kalanı dayanarak, additonal modifikasyonlar gerekli olabilir.)

bakınız, aynı zamanda, sahip benim uygulama için bu short demo.

Answer 2

(araç iç içe jQuery Tabs içinde jQuery DataTable içindeki hücrelerdeki ipuçları, sadece 'position: absolute' ayarı yeterli değildi - aynı zamanda yaratılıştan sonra konumlandırıldığı için ilk ekran üstü ve sol pozisyonu vermek zorunda kaldım:

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