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

qltillow  于 2022-12-08  发布在  Bootstrap
关注(0)|答案(1)|浏览(135)

我正在处理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();
 });
368yc8dk

368yc8dk1#

给您: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属性。接缝处有一个填充,你可能想测试一些值,但这是做它的方法。希望它对你有用。

相关问题