Twitter bootstrap dynamic tips for jQuery UI Slider

Question

How to add a tooltip at the top of each jQuery Ui slider handler with a Twitter Slider tooltip that dynamically changes as user slides?

I come up with this, but it is behind the scenes, and sometimes the tooltip disappears and is unstable. In other words, this does not work very 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 it is what the plugin was designed for, so instead of using the boot plugin itself (for me it would be a pain to change for this task), you can just use its markup and css and rebuild its in 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 tooltip for the bootstrap, as well as our own class, which we can easily modify to accommodate it. For instance:

CSS

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

Demo , edit here .

Answer 2

Gitub / Bootstrap has a known issue related to the problem: Twipy tooltip with inaccessible link inside .

There you can see one of the creators saying:

There is no way to do this. Our tips were not intended for interactive content. If you want it, the best thing would be to roll a custom solution that has a tooltip inside an element that hangs, so the mouseout event does not fire.

And a couple of months later:

Oh, actually in 2.0 you can make a placement: “inside the top”, and it will insert the tipsy inside the falling element. You will need to make some work with css from there to make sure that it does not inherit styles, etc. Not sure if this will really make it into the final 2.0 release.