Question

如何使用随用户幻灯片动态更改的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'});

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;
}

Demo，修改here。

Answer 2

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

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

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

几个月后：

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

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

2 个答案: