jQuery UI Slider 的动态 Twitter 引导工具提示答案

【问题标题】：Dynamic Twitter bootstrap tooltips for jQuery UI SliderjQuery UI Slider 的动态 Twitter 引导工具提示
【发布时间】：2012-03-26 16:00:39
【问题描述】：

如何使用随着用户滑动而动态变化的 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'});

【问题讨论】：

您找到解决方案了吗？
你有转qtip的选项吗craigsworks.com/projects/qtip2/demos/ui-slider
嗨，Hellnar，您是否尝试在 twitter 工具提示中将动画属性设置为 false ——它默认为 true，可能是阻止平滑的原因。所以试试：$('.ui-slider-handle').attr('title', 'test').tooltip({trigger:'manual'; animation:false;});

标签： jquery jquery-ui twitter-bootstrap

【解决方案1】：

您的工具提示消失并闪烁，因为这也是插件的设计方式，因此您可以简单地使用它的标记和 css 而不是使用引导插件本身（对我来说修改这个任务会很痛苦）在 jQueryUI 中重建它。试试这个例子：

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。

【讨论】：

【解决方案2】：

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

你可以看到其中一位创作者是怎么说的：

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

几个月后：

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

【讨论】：