如何通过使用随用户幻灯片动态更改的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'});
解决方法
你的工具提示消失了并且闪烁,因为这也是插件的设计,所以不是使用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;
}
