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属性。你有一个填充接缝，你可能想测试一些值，但这就是它的方法。希望它适合你。

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

1 个答案: