如何使用随用户幻灯片动态更改的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'});
答案 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;
}
答案 1 :(得分:1)
在Github / Bootstrap上有一个与之相关的众所周知的线程问题:Twipsy tooltip with an unreachable link inside。
在那里你可以看到其中一位创作者说:
没有办法做到这一点。我们的工具提示并非旨在提供互动内容。如果你确实想要这个,你最好的选择就是 滚动一个自定义解决方案,其中包含元素中的工具提示 正在悬停,因此不会触发mouseout事件。
几个月后:
哦,实际上在2.0你可以做位置:“在顶部”,它会在被悬停的元素内插入醉意。你必须这样做 一些人从那里使用css以确保它不继承样式, 不确定这是否真的会进入最终的2.0 释放。