How to attach a Bootstrap 3 tooltip to a Draggable Element

Question

I am working on this demo. How can I attach the tooltip to jQuery UI handler so when the handler moves the tooltip also moves?

Here is my code:

 $(function () {
     $("#slider-vertical").slider({
         orientation: "vertical",
         range: "min",
         min: 0,
         max: 100,
         value: 60,
         slide: function (event, ui) {
             $("#amount").val(ui.value);
         }
     });
     $("#amount").val($("#slider-vertical").slider("value"));
     $(".ui-slider-handle").attr("rel", "tooltip");
     $(".ui-slider-handle").attr("data-toggle", "tooltip");
     $(".ui-slider-handle").attr("data-placement", "left");
     $(".ui-slider-handle").attr("title", "This");
     $("[rel='tooltip']").tooltip();
 });

Answer 1

Here you go: http://jsfiddle.net/XHrP9/4/

 $(function() {
$( "#slider-vertical" ).slider({
  orientation: "vertical",
  range: "min",
  min: 0,
  max: 100,
  value: 60,
  slide: function( event, ui ) {

    $( "#amount" ).val( ui.value );
    var offsets = $('.ui-slider-handle').offset();
    var top = offsets.top;
    $(".tooltip").css('top', top-90+"px");
    $(".tooltip-inner").text(ui.value);

  }
});
$( "#amount" ).val( $( "#slider-vertical" ).slider( "value" ) );

In the slide function you need to update the top CSS property. Seams you have a padding there, you might want to test some values but thats the way to do it. Hope it works for you.