如何将 Bootstrap 3 工具提示附加到可拖动元素

Question

您能否看看this demo，让我知道如何将工具提示附加到 jquery ui 处理程序，以便当处理程序移动时，工具提示也会移动？

这是我的代码：

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

给你：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" ) );

在幻灯片功能中，您需要更新顶部的 CSS 属性。接缝处有填充，您可能想要测试一些值，但这就是这样做的方法。希望它对你有用。