tooltip

New to Kendo UI for jQuery? Start a free 30-day trial

configuration

Configuration of the Slider tooltip.

Object

<input id="slider" style="width: 300px" />
<script>
  $("#slider").kendoSlider({
    min: 0,
    max: 100,
    value: 60,
    tooltip: {
      enabled: true,
      format: "{0:N2}"
    }
  });
</script>

tooltip.enabled

Boolean

Disables (false) or enables (true) the tooltip of the Slider.

Default: true

<input id="slider" style="width: 300px" />
<script>
  $("#slider").kendoSlider({
    min: 0,
    max: 100,
    value: 35,
    tooltip: {
      enabled: false
    }
  });
</script>

tooltip.format

String

Format string for the text of the tooltip. Note: The applied format will also influence the appearance of the Slider tick labels.

The slider widget supports precision of up-to 10 digits after the decimals point.

Default: "{0:#,#.##}"

<input id="slider" style="width: 300px" />
<script>
  $("#slider").kendoSlider({
    precision: 4,
    smallStep:0.0001,
    largeStep:0.0001,
    min:0,
    max:0.0004,
    value: 0.0002,
    tooltip: {
      format: "{0:#,#.####}"
    }
  });
</script>

tooltip.template

String|Function

Template of the tooltip. The following variables are passed by the Slider and are ready to be used inside the template:

value - the current value when using a regular slider
selectionStart and selectionEnd - the current values when using a range slider

<div id="rangeslider" class="humidity">
  <input />
  <input />
</div>

<script>
  // the following template definitions are identical and represent the default RangeSlider template

  var templateString = "#= selectionStart # - #= selectionEnd #";
  // or
  // var templateString = "# return selectionStart  + ' - ' + selectionEnd #";

  $("#rangeslider").kendoRangeSlider({
    min: 0,
    max: 100,
    tooltip: {
      template: kendo.template(templateString)
    }
  });
</script>

tooltip

tooltip.enabled

tooltip.format

tooltip.template