Javascript 在带有多个句柄的jquery ui滑块上显示工具提示

我有一个Jquery ui滑块，它有多个控制柄，可以添加和删除，我想在移动控制柄时在控制柄上方显示工具提示，这是我创建的代码：

var tooltip = $('<div id="tooltip" />').css({
    position: 'absolute',
    top: -25,
    left: -10
}).hide();

var values = [10, 50, 70, 90];
var val = 20;

//add handle to the slider
$('button').bind('click', function(e) {

  e.preventDefault();

  $(".slider").slider("destroy");

  values.push(val);
  values = values.sort();

  $(".slider").slider({
    min: 0,
    max: 100,
    steps: 1,
    values: values
  })

})

//create the slider
$(".slider").slider({
  min: 0,
  max: 100,
  steps: 1,
  values: values,
  slide: function(event, ui) {
    tooltip.text(ui.value);
  },
  change: function(event, ui) {}

}).find(".ui-slider-handle").append(tooltip).hover(function() {
  tooltip.show()
}, function() {
  tooltip.hide()
});

//remove slider handle on double click
$(document).on('dblclick', '.ui-slider-handle', function() {
  if ($('.ui-slider-handle').length > 2)
    $(this).remove();
    //alert($(this)[0].style.left);
})

var工具提示=$（''）.css({
位置：'绝对'，
前-25，
左：-10
}).hide（）；
var值=[10,50,70,90]；
var=20；
//将控制柄添加到滑块
$（'button'）.bind（'click'，函数（e）{
e、 预防默认值（）；
$（“.slider”）.slider（“销毁”）；
推送值（val）；
values=values.sort（）；
$（“.slider”）.slider({
分:0,，
最高：100，
步骤：1，
价值观：价值观
})
})
//创建滑块
$（“.slider”）.slider({
分:0,，
最高：100，
步骤：1，
价值观：价值观，
幻灯片：功能（事件、用户界面）{
文本（ui.value）；
},
更改：函数（事件，ui）{}
}).find（“.ui滑块句柄”）.append（工具提示）.hover（函数（）{
tooltip.show（）
}，函数（）{
tooltip.hide（）
});
//双击时移除滑块手柄
$（document）.on（'dblclick'，'.ui滑块句柄'，函数（）{
如果（$（'.ui滑块句柄'）。长度>2）
$（this.remove（）；
//警报（$（此）[0].style.left）；
})

正如您在示例中所看到的，工具提示工作正常，但它没有显示在正确的位置，而且它也不适用于新创建的控制柄

有人能帮我吗

---

谢谢您

第一个问题：bind已弃用，请在上使用

销毁滑块时，也会删除工具提示

因此，在单击按钮时，在销毁滑块之前，需要保留工具提示（）的副本，以便再次使用

为了简化一切，您可以使用滑块创建功能

为了解决最后一个问题（…但它没有出现在正确的位置），您需要更改这行代码：

tooltip.text(ui.value);

致：

片段：

函数createSlider（工具提示、值）{
$（“.slider”）.slider({
分:0,，
最高：100，
步骤：1，
价值观：价值观，
幻灯片：函数（事件、ui）{
$（this.find（'div'）.text（ui.value）；
},
更改：函数（事件，ui）{}
}).find（“.ui滑块句柄”）.append（工具提示）.hover（函数（）{
$（“.ui滑块句柄”）.find（'div'）.hide（）
$（this.find（'div'）.show（）；
});
}
变量工具提示=$（''）.css({
位置：'绝对'，
前-25，
左：-10
}).hide（）；
var值=[10,50,70,90]；
var=23；
$（'button'）。在（'click'）上，函数（e）{
e、 预防默认值（）；
//
//保留工具提示
//
工具提示=$（“#工具提示”）.clone（）；
$（“.slider”）.slider（“销毁”）；
推送值（val）；
values=values.sort（）；
CreateSloider（工具提示、值）；
})
CreateSloider（工具提示、值）；
$（document）.on（'dblclick'，'.ui滑块句柄'，函数（）{
如果（$（'.ui滑块句柄'）。长度>2）
$（this.remove（）；
//警报（$（此）[0].style.left）；
})

正文{
边缘顶部：80px；
}

点击它谢谢你的回答，你解决了第一个问题，但是新创建的句柄不起作用。你给出了一半答案，@gaetanoM给出了另一半答案，实际上我通过结合你的答案和gaetanoM的答案使它起作用。第一个用正确答案更新自己答案的人，我会接受他的答案。谢谢gaetanoM给出完整的答案。
$(this).find('div').text(ui.value);