Проблема размещения курсора jQuery UI

У меня проблема с позиционированием с подсказками jQuery UI. Я бы предпочел не использовать jQuery UI, но проект, над которым я работаю, уже использует его повсюду, и мне было предложено попробовать и использовать его, вместо того, чтобы интегрировать мой предпочтительный вариант qTip2.

Когда появляется всплывающая подсказка, она вызывает вертикальную полосу прокрутки. Я позиционирую всплывающую подсказку централизованно выше цели, и она, как я хочу, исключая эту проблему.

$(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, чтобы определить проблему, и, похоже, это связано с заполнением (любой) или высотой (мин, макс или фиксировано).

Несмотря на то, что удаление дополнений и высоты устраняет проблему, очевидно, что всплывающая подсказка немного выглядит... Skinny. Я хотел бы разобраться в том, что это проблема, и об этом, поэтому я могу создать подсказку.

Мой текущий 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 открытая проблема с коннекторами, поэтому я тестировал его без каких-либо настроек позиционирования, и это не имело никакого значения для это.

Я видел эту проблему несколько раз, но это не имело значения, поскольку у меня нет qTip или что-то еще.

Я создал здесь скрипт JS.

Буду признателен за любую помощь или совет.

Спасибо!

Ответ 1

Если я правильно понимаю, что вы описываете как проблему, добавляется вертикальная полоса прокрутки, потому что добавочный div ( "# ui-tooltip-XX" ) добавляется к телу документа с помощью position: relative, который занимает дополнительное место пространство, увеличивающее свойство body scrollHeight (и вызывает появление полосы прокрутки). Если это "совместимо" с остальной частью вашего HTML (чего у меня нет в моем распоряжении для тестирования), вы можете обойти эту проблему, установив атрибут position в подсказку position (что не способствует его высота контейнера.

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

(На основе остальной части HTML на вашей странице могут потребоваться дополнительные модификации.)

См. также эту короткую демонстрацию.

Ответ 2

Для моего приложения (которое имеет всплывающие подсказки в ячейках в jQuery DataTable внутри вложенных вкладок jQuery), просто установить "position: absolute" было недостаточно - мне также пришлось придать подсказкам начальную экранную верхнюю и левую позицию, поскольку она получает только после создания:

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