Как прикрепить всплывающую подсказку 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. Швы, у вас есть отступы, вы можете проверить некоторые значения, но это способ сделать это. Надеюсь, это работает для вас.