jQuery Ui Slider - Как предотвратить отображение всплывающей подсказки под ползунком? - PullRequest
Новая
       52

jQuery Ui Slider - Как предотвратить отображение всплывающей подсказки под ползунком?

0 голосов
/ 21 мая 2019

С помощью компонента jQuery UI Slider всплывающая подсказка будет отображаться под ползунком для наглядности. Аналогично тому, как раскрывающийся список будет отображаться над / под полем ввода, когда в окне недостаточно места для параметров раскрывающегося списка.

Мне нужно убрать эту способность, чтобы подсказка всегда отображалась над ползунком, независимо от положения экрана. Я не вижу опции для этого в документации API , и я не могу найти решение через Google.

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

  $slider.slider({
            range: "min",
            values: [140,0]
            min: 20,
            max: 1200,
            step: 1,
            slide: function (event, ui) {
                adjustHover(ui.handle);
            },
            stop: function (event, ui) {
                adjustHover(ui.handle);
            }
        });

     //Tried this
     window.addEventListener("scroll", function () {
        $slider.find('.slider-hover').css(top, "24.6px");
    }, false);

Я ожидаю, что всплывающая подсказка останется над ползунком при прокрутке экрана вверх или вниз.

РЕДАКТИРОВАТЬ: Другой вариант будет класс, который добавляется при изменении позиции выше / ниже. Тогда я мог бы стиль соответственно. Но я не уверен, где добавить этот класс.

Добавлена ​​картинка для наглядности: Tooltip below slider

РЕДАКТИРОВАТЬ 2: Пришли к решению проблемы ... все еще открыты для лучших решений! 

var paymentTop = parseInt($('#monthly-payment-amount').css("top"));
if (paymentTop > 70) {
    $('#monthly-payment-amount').addClass('below');
} else {
    $('#monthly-payment-amount').removeClass('below');
}

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

1 Ответ

0 голосов
/ 21 мая 2019

Вы можете добавить z-index с CSS к классу .ui-slider-handle, чтобы обеспечить видимость

...