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

Question

我尝试使用引导滑块实现重播功能。这些值代表时间。它工作得很好。

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

有没有办法将事件附加到悬停并取回值？

Answer 1

我找到了解决我的问题的方法。它不稳定，因为我使用了两个未记录的函数 _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);
});

它现在按预期工作。