Configuration tooltip

Specifies options for the slider tooltip.

Type: Object

Show Example:
AngularJS
Knockout
jQuery
<div ng-controller="demoController">
    <div dx-slider="{
        min: 1,
        max: 100,
        value: 38,
        tooltip:{
            showMode: 'always'
        },
        bindingOptions: {
            'tooltip.enabled': 'tooltipEnabled'
        }
    }"></div>
    <div class="dx-fieldset">
        <div class="dx-field">
            <div class="dx-field-label">Show tooltip</div>
            <div class="dx-field-value" ng-model="tooltipEnabled" dx-switch="{ }"></div>
        </div>
    </div>
</div>
var myApp = angular.module('myApp', ['dx']);
myApp.controller("demoController", function ($scope) {
    $scope.tooltipEnabled = false;
});
angular.element(document).ready(function () {
    angular.bootstrap(document, ['myApp']);
});
body{
    text-align: center;
}
.dx-slider{
    margin: 40px 10px;
}
<div data-bind="dxSlider: {
    min: 1,
    max: 100,
    value: 38,
    tooltip: {
        showMode: 'always',
        enabled: tooltipEnabled
    }
}"></div>
<div class="dx-fieldset">
    <div class="dx-field">
        <div class="dx-field-label">Show tooltip</div>
        <div class="dx-field-value" data-bind="dxSwitch: { value: tooltipEnabled }"></div>
    </div>
</div>
var myViewModel = {
    tooltipEnabled: ko.observable(false)
}
ko.applyBindings(myViewModel);
body{
    text-align: center;
}
.dx-slider{
    margin: 40px 10px;
}
<div id="mySlider"></div>
<div class="dx-fieldset">
    <div class="dx-field">
        <div class="dx-field-label">Show tooltip</div>
        <div class="dx-field-value" id="tooltipSelector"></div>
    </div>
</div>
$("#mySlider").dxSlider({
    min: 1,
    max: 100,
    value: 38,
    tooltip: {
        showMode: 'always',
        enabled: false
    }
});
$("#tooltipSelector").dxSwitch({
    value: false,
    onValueChanged: function (e) {
        $("#mySlider").dxSlider("instance").option("tooltip.enabled", e.value);
    }
})
body{
    text-align: center;
}
.dx-slider{
    margin: 40px 10px;
}

enabled

Specifies whether or not the tooltip is enabled.

Type: Boolean
Default Value: false

format

Specifies format for the tooltip.

Type: String| function
Default Value: function(value) { return value }

A function passed to this option should take on a numeric value and return the formatted value. For instance, you can add a "$" sign before a value. In this case the function passed to the format option should look like the following.

JavaScript
function(value) {
    return "$" + value;
}

You can also pass a string satisfying Globalize format patterns to the format option.

NOTE: If you set this option to 'currency', the tooltip will be formatted according to the settings specified for the current culture in the globalize library. To provide a custom 'currency' format, assign a function to this option.

position

Specifies whether the tooltip is located over or under the slider.

Type: String
Default Value: 'top'
Accepted Values: 'top' | 'bottom'

showMode

Specifies whether the widget always shows a tooltip or only when a pointer is over the slider.

Type: String
Default Value: 'onHover'
Accepted Values: 'onHover' | 'always'