Как прикрепить всплывающую подсказку 3 к перетаскиваемому элементу

Можете ли вы взглянуть на эту демонстрацию и дать мне знать, как я могу прикрепить всплывающую подсказку к обработчику 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();
 });

Спасибо

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" ) );

В функции слайда вам необходимо обновить свойство top CSS. Швы, у вас есть отступы, вы можете проверить некоторые значения, но это способ сделать это. Надеюсь, это работает для вас.

Другие вопросы по тегам