如何在 Bootstrap 滑块中的鼠标位置显示工具提示值

How to show tooltip value at the position of the mouse in Bootstrap slider

我尝试用 bootstrap 滑块实现重放功能。这些值代表时间。效果很好。

我需要悬停工具提示。 当您移动滑块手柄时,工具提示会显示给定位置的值。但是,当您在单击滑块之前将鼠标悬停时,没有对新值的反馈。

有什么方法可以将事件附加到悬停并取回值吗?

我找到了解决问题的方法。它不稳定,因为我使用了两个未记录的函数 _getPercentage 和 _toValue。 我必须更改为非 jquery 用法,才能访问未记录的函数。还有一些额外的功能。我可以在滑块操作期间使用 SliderUpdateEnabled 关闭滑块的更新。我可以在滑块处理程序移动期间关闭 mousemove 事件。棘手的部分是在 mousemove 事件中。

var slider = new Slider("#replaySlider", {
    formatter: function(value) {
        return moment(value).format("MM.DD. HH:mm:ss");
    }
});
this.slider = slider;
slider.on('slideStart', function() {
    sm.controller.setSliderMove(true);
    sm.controller.setSliderUpdateEnabled(false);
});         
slider.on('slideStop', function() {
    var value = slider.getValue();
    sm.controller.setPlaybackTime(value);
    sm.controller.setSliderUpdateEnabled(true);
    sm.controller.setSliderMove(false);
});         

$(".slider-track").on("mousemove",function(evt) {
    if (sm.controller.isSliderMove()) {
        return;
    }
    sm.controller.setSliderUpdateEnabled(false);
    // gets the percentage from the pointer event
    var percent = slider._getPercentage(evt)
    // moves the tooltip to the pointer position
    $(".replayShow").find(".tooltip-main").css("left", percent+"%");
    // updates the text in the tooltip
    $(".replayShow").find(".tooltip-inner").html(moment(slider._toValue(percent)).format("MM.DD. HH:mm:ss"));
});
$(".slider-track").on("mouseout",function(evt) {
    if (sm.controller.isSliderMove()) {
        return;
    }               
    sm.controller.setSliderUpdateEnabled(true);
});

现在按预期运行。