Problem z pozycjonowaniem narzędzia jQuery UI

Question

Mam problem z pozycjonowaniem z etykietkami interfejsu użytkownika jQuery. Wolałbym nie używać interfejsu jQuery, ale projekt, nad którym pracuję, już używa go w całości i poprosiłem o jego wykorzystanie, a nie integrację preferowanej opcji qTip2.

Po wyświetleniu etykiety narzędzi powoduje pionowy pasek przewijania. Umieszczam etykietkę narzędzia centralnie nad celem i jest taka, jak chcę, z wyłączeniem tego problemu.

$(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); 
    } 
    } 
}); 
}); 

widzę, że etykietka jest umieszczony na górze: -600px które zakładam to, co jest przyczyną pasek przewijania się pojawiać.

Próbowałem zmienić/usunąć położenie etykiety narzędzi, ale nie przyniosło to żadnego efektu. Próbowałem usunąć części CSS, aby wskazać problem i wydaje się, że jest on związany z wyściółką (dowolną) lub wysokością (min., Maks. Lub ustalona).

Mimo że usunięcie paddingu i wysokości rozwiązuje problem, to oczywiście pozostawia ono podpowiedź wyglądającą na ... Chudy. Chciałbym dowiedzieć się, jaki jest problem i jak go obejść, aby móc stylizować etykietę.

Moje bieżące CSS (w tym wysokość i dopełnienie, które widzę powoduje problem) są następujące (istnieją również style ustawione dla strzałek, które pominąłem, ponieważ widzę, że nie powodują żadnych problemów):

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

wiem jQuery UI mają an open issue about connectors, więc Przetestowałem go bez ustawieniach pozycjonowania i to nie ma znaczenia do tego.

Kilka razy widziałem, że wymieniono this issue, ale nie było to istotne, ponieważ nie mam qTip ani żadnych innych elementów.

Skonfigurowałem JS fiddle here.

Doceniam każdą pomoc lub poradę.

Dzięki!

Answer 1

Jeśli dobrze rozumiem, co można opisać jako problem, pionowy pasek przewijania dodaje ponieważ dodatkowy div („# ui-tooltip-XX”) jest dołączany do ciała dokumentu z position: relative, która zajmuje dodatkowej przestrzeni zwiększenie właściwość obiektu scrollHeight (i pojawienie się paska przewijania). Jeśli jest to "zgodne" z resztą kodu HTML (którego nie mam do dyspozycji do przetestowania), można obejść ten problem, ustawiając atrybut narzędzia position na absolute (który nie przyczynia się do całkowitej wysokości kontenera .

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

(na podstawie resztą HTML na swoją stronę, dodatkową modyfikacje mogą okazać się niezbędne.)

Patrz także ten short demo.

Answer 2

Dla mojej aplikacji (który ma narzędzie wskazówki w komórkach w jQuery DataTable w zagnieżdżonych zakładkach jQuery), samo ustawienie "position: absolute" było niewystarczające - musiałem również podać etykietki z podpowiedziami początkową górną i lewą pozycję na ekranie, ponieważ zostaje ona ustawiona dopiero po utworzeniu:

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