我认为你必须在创建，滑动或停止的同时创建一个新标签。 下面的解决方案使用jquery ui滑块的回调函数。

null

$(function() {
  $("#slider1").slider({
    min: 0,
    max: 5,
    orientation: "horizontal",
    range: "min",
    animate: true,
    create: handleSliderText,
    slide: handleSliderText,
    stop: handleSliderText
  });

  function handleSliderText(event, ui) {
    var greeting,
      slider = $(event.target),
      value = ui.value || slider.val();

    if (value < 1) {
      greeting = "Average";
    } else if (value < 2) {
      greeting = "Below Average";
    } else {
      greeting = "Good";
    }

    var infoBox = getInfoBox(slider);
    infoBox.text(greeting);
  }

  function getInfoBox(slider) {
    var infoBox = slider.find('.info-box');

    if (infoBox.length) {
      return infoBox;
    }

    infoBox = $('<div></div>').addClass('info-box');
    slider.find('.ui-slider-handle').html(infoBox);

    return infoBox;
  }

});

.ui-slider {
  margin: 50px;
}

.ui-slider .info-box {
  position: absolute;
  margin: -12px 0 0 8px;
  padding: 5px 20px;
  background-color: #f52f52;
  color: #fff;
  transform: translate(-50%, -100%);
  text-align: center;
  white-space: nowrap;
  border-radius: 100px;
}

.ui-slider .info-box::before {
  content: "";
  position: absolute;
  bottom: -8px;
  left: 50%;
  border: 10px solid #f52f52;
  border-bottom: none;
  border-left-color: transparent;
  border-right-color: transparent;
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
}

<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<div id="slider1"></div>

除了stop，JQuery还提供了另一个非常有用的漂亮事件:slide。 当滑块的手柄被拖到一个新位置时，它就会被激发。 在它的回调处理程序中，您可以根据需要更改工具提示的文本。

工具提示本身可以是任何能够显示文本的HTML元素。 有几种方法可以将工具提示放在滑块手柄附近。 一种简单的方法是将它附加到句柄，从而使它成为子元素。

由于工具提示应该是一个工具提示，因此可以使用滑块的开始和停止事件来相应地显示或隐藏它。

下面是一个例子:

null

$(function() {
  function updateTooltip(value) {
    if (value < 1) {
      tooltip.text("Below Average");
    } else if (value < 2) {
      tooltip.text("Average");
    } else {
      tooltip.text("Good");
    }

    tooltip[0].style.left = parseInt(slider.find(".ui-slider-handle").width() / 2 - tooltip.width() / 2) + "px";
  }

  var tooltip = $('.tooltip');
  var slider = $('#slider1');
  tooltip.hide();

  $("#slider1").slider({
    min: 0,
    max: 5,
    orientation: "horizontal",
    range: "min",
    animate: true,
    stop: function(event, ui) {
      tooltip.fadeOut('fast');
    },
    start: function(event, ui) {
      updateTooltip(ui.value);
      tooltip.fadeIn('fast');
    },
    slide: function(event, ui) {
      updateTooltip(ui.value);
    }
  }).find(".ui-slider-handle").append(tooltip);
});

.tooltip {
  position: absolute;
  top: -30px;
  color: #000000;
  background-color: #eeeeee;
  border-radius: 3px;
  border: 1px solid #333333;
}

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<label class="tooltip"></label>
<div id="slider1" style="width:80%;margin:50px"></div>