javascript - Formatting Tooltip in Bootstrap Slider - Stack Overflow

admin管理员组

文章数量:1315962

I am using the Bootstrap Slider control. I am setting up my slider like this:

<input id="percentSlider" data-slider-id="percentSlider" type="text" data-slider-min="0" data-slider-max="100" data-slider-step="0.1" value="0" />
<input id="percent" class="form-control" type="text" autoplete="off"  />

...

var p = 0;
var percentSlider = $('#percentSlider')
  .slider({
    formatter: function (value) {
      return value.toFixed(1) + '%';
    },
    value: p,
    precision: 1
  })
  .on('slide', function (s) {
    $('#percent').val(s.value.toFixed(1));
  })
;

$('#percent').val(p);

This slider 'works', except for one piece: the tooltip. As a user slides, I need the tooltip to be formatted with single precision. In other words, I need the tooltip to show 10.0 -> 10.1 -> 10.2 etc. Currently, when a user slides, I may see a value like '55.300000000004'. I'd really like to include a percentage in the tool tip as well so it shows something like '10.0%' or '10.1%'. Still, I need a single precision value in the tool tip and I am not having any luck doing so.

Does anyone know how I can specify the format for the tooltip?

Thanks!

I am using the Bootstrap Slider control. I am setting up my slider like this:

<input id="percentSlider" data-slider-id="percentSlider" type="text" data-slider-min="0" data-slider-max="100" data-slider-step="0.1" value="0" />
<input id="percent" class="form-control" type="text" autoplete="off"  />

...

var p = 0;
var percentSlider = $('#percentSlider')
  .slider({
    formatter: function (value) {
      return value.toFixed(1) + '%';
    },
    value: p,
    precision: 1
  })
  .on('slide', function (s) {
    $('#percent').val(s.value.toFixed(1));
  })
;

$('#percent').val(p);

This slider 'works', except for one piece: the tooltip. As a user slides, I need the tooltip to be formatted with single precision. In other words, I need the tooltip to show 10.0 -> 10.1 -> 10.2 etc. Currently, when a user slides, I may see a value like '55.300000000004'. I'd really like to include a percentage in the tool tip as well so it shows something like '10.0%' or '10.1%'. Still, I need a single precision value in the tool tip and I am not having any luck doing so.

Does anyone know how I can specify the format for the tooltip?

Thanks!

• javascript
• jquery

Share Improve this question Follow asked Oct 16, 2014 at 14:09 user70192user70192 14.2k5353 gold badges167167 silver badges244244 bronze badges 1

• Strangely, your code works fine, and all of the answers are wrong. Am I missing something here? – Skeets Commented May 11, 2017 at 20:03

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 5

Solution without changing the actual plugin file:

var percentSlider = $('#percentSlider').slider();
var sliderTooltip = $('#percentSlider .tooltip .tooltip-inner');
//function to change the tooltip value to required format
var _changeTooltipFormat = function(){
	sliderTooltip.text(sliderTooltip.text()+'%');
}
//change tooltip format on initial load
_changeTooltipFormat();

//on slide event 
percentSlider.on('slide', function () {
   $('#percent').attr('value',percentSlider.data('slider').getValue());
   //change tooltip value format 
   _changeTooltipFormat();  
});

as i don't see/get any setter or format area for tooltip text in option. i came up with this. hope this may help

search for var formattedTooltipVal in bootstrap-slider.js

there you see an initialize for above var. my need is to add $ as i need to display price range. so edited like below

formattedTooltipVal = '$' + this.options.formatter(this._state.value).replace(": ", ": $");

the chunk of code you need to edit in bootstrap-slider.js is

if (this.range) {
            this.tooltipInner.text(
                this.formater(this.value[0]) +
                ' : ' +
                this.formater(this.value[1])
            );
            this.tooltip[0].style[this.stylePos] = this.size * (this.percentage[0] + (this.percentage[1] - this.percentage[0])/2)/100 - (this.orientation === 'vertical' ? this.tooltip.outerHeight()/2 : this.tooltip.outerWidth()/2) +'px';
        } else {
            this.tooltipInner.text(
                this.formater(this.value[0])
            );
            this.tooltip[0].style[this.stylePos] = this.size * this.percentage[0]/100 - (this.orientation === 'vertical' ? this.tooltip.outerHeight()/2 : this.tooltip.outerWidth()/2) +'px';
        }
    },

now when you want to see a % sign next to your percent values just add

if (this.range) {
                this.tooltipInner.text(
                    this.formater(this.value[0] + ' %') +
                    ' : ' +
                    this.formater(this.value[1] + ' %')
                );

本文标签： javascriptFormatting Tooltip in Bootstrap SliderStack Overflow