javascriptbootstrap-slider

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


I try to implement a replay function with bootstrap slider. The values represent time. It works just fine.

I need a hover tooltip. When you move the slider handle the tooltip shows the value for the given position. But when you hover the mouse before a click on the slider there is no feedback for the new value.

No tooltip information for the position Is there any way to attach an event to the hover and get the value back?


Solution

  • I found a hack to my problem. It is not stable as I use two non documented function _getPercentage, and _toValue. I have to change to the non jquery usage, to access the non documented functions. There is some additional functionality. I can switch off the update of the slider with SliderUpdateEnabled during slider manipulation. And I can switch off the mousemove event during slider handler movement. The tricky part is in the mousemove event.

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

    It works now as expected.