jQuery Ui Slider - 如何防止工具提示显示在滑块下方？

Question

使用 jQuery UI Slider 组件，工具提示将跳到滑块下方以获得可见性。类似于当窗口上没有足够空间放置下拉选项时，下拉菜单在输入框上方/下方的显示方式。

我需要删除该功能，以便无论屏幕位置如何，工具提示都会始终显示在滑块上方。我在api documentation 中没有看到此选项，也无法通过谷歌找到解决方案。

当顶部属性由滑块计算时，我尝试手动设置位置，但这仅在部分时间有效并覆盖滑块功能。这不是一个好的解决方案。

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

我希望当屏幕向上或向下滚动时，工具提示悬停将保持在滑块上方。

编辑：另一个选项是在上/下位置发生变化时添加的类。然后我可以相应地设置样式。但是我不确定在哪里添加这个类。

为清楚起见添加了一张图片：

编辑 2： 想出了一个变通办法...仍然对更好的解决方案持开放态度！

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

测试顶部位置，然后添加一个将相应调整箭头的类。

Answer 1

您可以在 .ui-slider-handle 类上添加带有 CSS 的 z-index 以强制可见