jquery - jQuery UI Slider 的动态 Twitter Bootstrap 工具提示

Question

如何使用随着用户滑动而动态变化的 Twitter Slider 工具提示在每个 jQuery Ui slider 处理程序的顶部添加工具提示？

我想出了这个，但它并不顺利，有时工具提示会消失并且不稳定。换句话说，它并没有真正发挥作用。

$( "#mySlider" ).slider({
    range: true,
    step: 5,
    min: 100,
    max: 500,
    values: [150, 300],
    slide: function(event, ui){
        $('.ui-slider-handle').tooltip('show');        
    }
});

$('.ui-slider-handle').attr('title', 'test').tooltip({trigger:'manual'});

Answer 1

你的工具提示消失并闪烁，因为这也是插件的设计目的，所以你可以简单地使用它的标记和CSS，而不是使用 Bootstrap 插件本身(对我来说，修改这个任务会很痛苦)在 jQueryUI 中重建它。例如尝试这个:

JS

slide: function(event, ui) {  
        $('.ui-slider-handle:first').html('<div class="tooltip top slider-tip"><div class="tooltip-arrow"></div><div class="tooltip-inner">' + ui.values[0] + '</div></div>');
        $('.ui-slider-handle:last').html('<div class="tooltip top slider-tip"><div class="tooltip-arrow"></div><div class="tooltip-inner">' + ui.values[1] + '</div></div>');
}

使用此方法，我们可以在每个 slider handle 顶部重建工具提示，该工具提示使用与 Bootstrap 工具提示相同的 css 以及我们自己的类，我们可以轻松修改以定位它。就像这样:

CSS

.slider-tip {
    opacity:1;
    bottom:120%;
    margin-left: -1.36em;
}

Demo ，编辑here .