使用滑块手柄移动工具提示

Question

我正在尝试制作一个滑块，滑块手柄上方会显示工具提示，指示滑块值。

我觉得它几乎可以工作，但它更新的方式很奇怪。它偶尔会移动到滑块手柄。

这是我的代码：

＆＃13;

＆＃13;

$(function() {
  var slider = $('#slider');
  slider.tooltip({
  	position: {my: "center",
              at: "top-100%",
              of: ".ui-slider-handle"}
  });
  slider.slider({
    min: 0,
    max: 10,
    slide: function(event, ui) {
      slider.tooltip( "destroy" );
      slider.tooltip({
        content: ui.value.toString(),
        position: {my: "center",
                  at: "top-100%",
                  of: ".ui-slider-handle"}
      });
    }
  });
});

＆＃13;

#slider{
  margin-top: 100px;
}

＆＃13;

<link href="https://code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script>

<div id="slider" title="0">

</div>

＆＃13;

＆＃13;

＆＃13;

为什么位置不经常锁定滑块而不是每次更改值？

编辑：添加了破坏，现在它更接近它应该如何但仍然不完全存在，因为我不想让它消失，只是更新。