如何在引導滑塊中的鼠標位置顯示工具提示值

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); 
}); 

現在按預期工作。