用于jQuery UI Slider的动态Twitter引导工具提示

Question

如何通过使用随用户幻灯片动态更改的Twitter滑块工具提示,在每个jQuery Ui滑块处理程序的顶部添加工具提示？

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

$( "#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

你的工具提示消失了并且闪烁,因为这也是插件的设计,所以不是使用bootstrap插件本身(对我来说这对于修改这个任务会很痛苦),你可以简单地使用它的标记和css并在其中重建它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>');
}

使用此方法,我们可以在每个滑块手柄的顶部重建工具提示,该手柄使用与引导工具提示相同的css以及我们可以轻松修改以定位它的我们自己的类.像这样:

CSS

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

演示,在这里编辑.