Dynamic positioning of the Tool Tip (Tooltip)

[Bilal-Abdeen]

Hi,

This is a very good plug-in. Thank you so much.

I wonder if there is a way to make the tool tips change position dynamically (CSS left attribute), depending on the position of the sliding button at the sliding bar?

When it is at the right edge, it should be right-aligned with the bar right end. When it is at the left edge, it should be left-aligned with the the bar left end. When it is in the middle, the tool tip should be center-aligned with the sliding button.

If there a simple tweak to the JS code, I would appreciate knowing about it.

Thanks
Bilal

[eskimoblood]

I've had the same problem, this is my solution:

updateSliderTooltip: function(slider, value) {
        var left = slider.find('.noUi-origin').position().left;
        var width = slider.width();
        var tooltip = slider.find('.btn');
        if (left < 60) {
          tooltip.css('left', -left + 'px');
        } else if (left > width - 60) {
          tooltip.css('left', (width - left - 120) + 'px');
        } else {
          tooltip.css('left', '');
        }

        tooltip.html(templateStrings.templates.settings.freepages.slider.free + ' ' + parseInt(value, 10) + 'PIs');
      },

      createSlider: function(type) {
        var slider = $('#' + type + 'Slider').noUiSlider({
          start: 0,
          connect: 'lower',
          step: 1,
          range: {
            'min': 0,
            'max': 100
          }
        });

        slider.on('slide', _.bind(this.updateSlider, this, type, slider));
        slider.Link('lower').to('-inline-<div class="btn btn-primary"></div>', function(value) {
          this.updateSliderTooltip(slider, value);
        }.bind(this));
}

The only problem is that the function is only called when the slider is dragged, not when you click somewhere on the slider. In this case its only called once with the start position.

[github-actions]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.