Dynamic Twitter bootstrap tooltips for jQuery UI Slider

Question

How can I add tooltip at the top of each jQuery Ui slider handler by using the Twitter Slider tooltip that dynamicly changes as user slides?

I come up with this but it is not smooth and sometimes the tooltip dissapears and not stable. In other words, it doesn't really work well.

$( "#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

Your tooltip disappears and flickers because that is what the plugin was designed too, so instead of using the bootstrap plugin itself (which for me would be a pain to modify for this task), you can simply use its markup and css and rebuild it within jQueryUI. Try this for example:

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

Using this method we can rebuild the tooltip on top of each slider handle that uses the same css as the bootstrap tooltip along with our own class that we can easily modify to position it. Like so:

CSS

.slider-tip {
    opacity:1;
    bottom:120%;
    margin-left: -1.36em;
}

Demo, edit here.

Answer 2

There is well known thread related to that on Github/Bootstrap as an Issue: Twipsy tooltip with an unreachable link inside.

There you can see how one of the creators says:

There isn't a way to do this. Our tooltips weren't designed to have interactive content. If you did want this, your best bet would be to roll a custom solution which houses the tooltip within the element which is being hovered, so that the mouseout event isn't fired.

And a couple of months later:

Oh, actually in 2.0 you can do placement: "inside top" and it will insert the tipsy inside the element being hovered. You'll have to do some work with css from there to make sure it doesn't inherit styles, etc. Not sure if this will actually make it into the final 2.0 release.