Как избежать прокрутки страницы при использовании qtip?

Question

Я большой поклонник qTip, но мне было интересно, есть ли способ использовать модальное окно без прокрутки страницы вверх.

Посмотрел вокруг, но пока ничего не нашел. Это возможно?

Answer 1

Да, это возможно! Вам необходимо установить поле настройки

adjust : {
    screen : true
}

где вы указываете положение всплывающей подсказки

position : {
    my : 'right center',
    at : 'left center',
    adjust : {
        screen : true
    }
}

Я не уверен, что это особенность qTip1, но я использовал в qtip2. Подсказка настраивается автоматически, чтобы избежать переполнения и прокрутки

Answer 2

Вы должны установить цель подсказки в качестве окна, как в демонстрационной части диалога qTip:

 position: {
      my: 'center',
      at: 'center',
      target: $(window)
 }

Вы также можете по желанию применить фиксированное позиционирование к кончику с помощью CSS, чтобы вообще не прокручивать модальное диалоговое окно. qTip автоматически учитывает все проблемы браузера с фиксированным позиционированием (кашель IE кашель). Например:

 .ui-tooltip {
      position: fixed;
 }

Или, если у вас есть свои собственные имена классов:

 .ui-tooltip-myClassName {
      position: fixed;
 }

Что касается другого предоставленного ответа, обратите внимание, что qTip2 имеет другой формат для настройки области просмотра (он больше не position.adjust.screen, как это было в qTip1) и, в частности, позволяет определить, какой содержащий элемент должен использоваться для корректировки:

position: {
      viewport: $(window)
}

Или для содержащего элемента вместо окна / экрана:

position: {
      viewport: $('#myElement')
}

Теперь вы также можете определить, как выполняется корректировка с помощью параметра "method", и можете ограничить его настройкой только по одной оси, указав "none" для другой. По умолчанию / унаследованный метод - это "перевернуть", но вы также можете указать "смещение", при котором наконечник перемещается только настолько, чтобы поместиться в окне просмотра. Формат такой:

position: {
      viewport: $(window),
      adjust: {
           method: '<method>'
      }
}

Или же,

position: {
      viewport: $(window),
      adjust: {
           method: '<horizontalMethod> <verticalMethod>'
      }
}

Например:

position: {
      viewport: $(window),
      adjust: {
           method: 'shift'
      }
}


position: {
      viewport: $(window),
      adjust: {
           // Only adjust tip position on the horizontal axis
           method: 'shift none'
      }
}