Проблема с позиционированием всплывающей подсказки пользовательского интерфейса jQuery

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

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

Мой текущий 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.

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

Спасибо!


jquery css jquery-ui jquery-ui-tooltip
person Amy    schedule 30.05.2013    source источник
comment
Я не вижу полосы прокрутки???   -  person gkalpak    schedule 30.05.2013
comment
@ExpertSystem На скрипке JS нет, поскольку отсутствуют другие элементы страницы. Я хотел продемонстрировать, как я это настроил, но в ответ на ваш комментарий я начал добавлять остальную часть своей разметки (убрал ее, поскольку страница реагирует, она изменяется, чтобы соответствовать окну JS Fiddle, и поэтому вы не сможет увидеть мою проблему). Я вижу, что полоса прокрутки появляется только тогда, когда на странице почти достаточно контента, чтобы гарантировать ее ... Дополнительная высота или отступ выталкивают ее за край. Раздражающе, это заставляет полосу прокрутки мигать и выключаться.   -  person Amy    schedule 30.05.2013
comment
@ExpertSystem Я решил эту проблему, установив абсолютную позицию.   -  person Amy    schedule 30.05.2013
comment
LOL - встречаются великие умы!   -  person gkalpak    schedule 30.05.2013
comment
@ExpertSystem Ха-ха, да! Спасибо за вашу помощь, я выбрал ваш ответ, так как вы, безусловно, помогли мне решить эту проблему. Один из тех, на который вы слишком долго смотрите и не видите очевидного. Спасибо еще раз :)   -  person Amy    schedule 30.05.2013
comment
Не знаю, чем я вам помог, но как всегда рад помочь :)   -  person gkalpak    schedule 30.05.2013

Ответы (2)


arrow_upward
21
arrow_downward

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

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

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

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

person gkalpak    schedule 30.05.2013
comment
Я столкнулся с аналогичной проблемой, я хочу ‹code›using: function (obj, info) { //если сверху добавить класс tooltip_top и удалить класс tooltip_bottom, то Visa virsa var tooltipBottom = (info.vertical ‹/code› info.vertical должен быть «верхний», но я получаю «низ». Он отлично работал в более старых версиях jquery и jquery-ui. Теперь я обновился до последних версий. - person Sarang Damkondwar; 12.01.2021

arrow_upward
2
arrow_downward

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

.ui-tooltip 
{ 
    position: absolute; 
    top: 100px; left: 100px;
}
person John - Not A Number    schedule 22.10.2014