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

时间:2012-03-26 16:00:39

标签: jquery jquery-ui twitter-bootstrap

如何使用随用户幻灯片动态更改的Twitter Slider工具提示,在每个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'});

2 个答案:

答案 0 :(得分:9)

你的工具提示消失并且闪烁,因为这也是插件的设计,所以不是使用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;
}

Demo,修改here

答案 1 :(得分:1)

在Github / Bootstrap上有一个与之相关的众所周知的线程问题:Twipsy tooltip with an unreachable link inside

在那里你可以看到其中一位创作者说:

  

没有办法做到这一点。我们的工具提示并非旨在提供互动内容。如果你确实想要这个,你最好的选择就是   滚动一个自定义解决方案,其中包含元素中的工具提示   正在悬停,因此不会触发mouseout事件。

几个月后:

  

哦,实际上在2.0你可以做位置:“在顶部”,它会在被悬停的元素内插入醉意。你必须这样做   一些人从那里使用css以确保它不继承样式,   不确定这是否真的会进入最终的2.0   释放。