Configuration tooltip

Specifies tooltip options for the gauge.

Type: Object

A tooltip is a small pop-up rectangle that displays the value of the indicator that is currently hovered over. You can enable or disable tooltips, format or customize the displayed text, and change the default appearance. Use the properties of the tooltip configuration object to do this.

Show Example:
jQuery

In this example, a number of the tooltip options are changed. The tooltip value is displayed in a currency format with the precision of 2. In addition, the font size and weight options are changed. To see the tooltip, hover over the red range bar.

<div id="linearGaugeContainer" style="height:150px;max-width:700px;margin:0 auto"></div>
$(function () {
    $('#linearGaugeContainer').dxLinearGauge({
        rangeContainer: { backgroundColor: 'purple' },
        scale: {
            startValue: 0,
            endValue: 100
        },
        valueIndicator: {
            type: 'rangeBar',
            color: 'red'
        },
        tooltip: {
            enabled: true,
            format: 'currency',
            precision: 2,
            font: {
                size: 20,
                weight: 700
            }
        },
        value: 42.73
    })
})

arrowLength

Specifies the length of the tooltip's arrow in pixels.

Type: Number
Default Value: 10

Show Example:
jQuery

In this example, tooltips have a 5-pixel arrow.

<div id="linearGaugeContainer" style="height:150px;max-width:700px;margin:0 auto"></div>
$(function () {
    $("#linearGaugeContainer").dxLinearGauge({
        rangeContainer: { backgroundColor: 'coral' },
        scale: {
            startValue: 0,
            endValue: 100
        },
        value: 43,
        subvalues: [34.5, 53, 12.34],
        tooltip: {
            enabled: true,
            arrowLength: 5
        }
    });
});

border

Specifies the appearance of the tooltip's border.

Type: Object

Show Example:
jQuery

In this example, several options of the tooltip's border are changed.

<div id="linearGaugeContainer" style="height:150px;max-width:700px;margin:0 auto"></div>
$(function () {
    $("#linearGaugeContainer").dxLinearGauge({
        rangeContainer: { backgroundColor: 'darkorchid' },
        scale: {
            startValue: 0,
            endValue: 100
        },
        value: 43,
        subvalues: [34.5, 53, 12.34],
        tooltip: {
            enabled: true,
            border: {
                opacity: 0.8,
                width: 2,
                color: 'orchid'
            }
        }
    });
});

color

Specifies the color of tooltips.

Type: String
Default Value: '#ffffff'

This option supports the following colors.

  • hexadecimal colors
  • RGB colors
  • RGBA colors (not supported in Internet Explorer 8)
  • predefined/cross-browser color names
  • predefined SVG colors (not supported in Internet Explorer 8)

This option sets one color for all tooltips on the widget. To specify a color for a particular tooltip, use the customizeTooltip option.

Show Example:
jQuery

In this example, tooltips are painted in 'powderblue' using the color option.

<div id="linearGaugeContainer" style="height:150px;max-width:700px;margin:0 auto"></div>
$(function () {
    $("#linearGaugeContainer").dxLinearGauge({
        rangeContainer: { backgroundColor: 'skyblue' },
        scale: {
            startValue: 0,
            endValue: 100
        },
        value: 62,
        subvalues: [34.5, 53, 12.34, 84, 73],
        tooltip: {
            enabled: true,
            color: 'powderblue'
        }
    });
});

customizeText

Deprecated

Use the customizeTooltip option instead.

Specifies a callback function that returns the text to be displayed in a tooltip.

Type: function(scaleValue)
Function parameters:
scaleValue: Object
Defines a scale value to be displayed in a tooltip.
Object structure:
value: Number
Specifies the scale value represented by a tooltip.
valueText: String
Specifies the scale value with an applied format, if the format and precision (optional) properties are specified.
Return Value: String
The text to be displayed in a tooltip.

When implementing a callback function for this option, you can access the scale value to be displayed in a tooltip. To learn how to do this, refer to the customizeTooltip option description.

customizeTooltip

Allows you to change the appearance of particular tooltips.

Type: function(scaleValue)
Function parameters:
scaleValue: Object
Defines a scale value to be displayed in a tooltip.
Object structure:
value: Number
Specifies the scale value represented by a tooltip.
valueText: String
Specifies the scale value with an applied format, if the format and precision (optional) properties are specified.
Return Value: Object
Specifies the text to be displayed in a tooltip and a color for the tooltip.
Default Value: undefined

This option should be assigned a function returning a specific object. The following fields can be specified in this object.

  • color
    Specifies the color of a tooltip.

  • text
    Specifies the text displayed by a tooltip.

When implementing the function for this option, you can access the scale value represented by a tooltip. This value can be accessed using the fields of the object that is passed as the function's parameter. Alternatively, you can use the this object within the function. This object has the same structure as the object passed as a parameter.

To get general information on data formatting, refer to the Data Formatting topic.

Show Example:
jQuery

In this example, if a tooltip represents a value greater than 50, it is painted in 'bisque'.

<div id="linearGaugeContainer" style="height:150px;max-width:700px;margin:0 auto"></div>
$(function () {
    $("#linearGaugeContainer").dxLinearGauge({
        rangeContainer: { backgroundColor: 'khaki' },
        scale: {
            startValue: 0,
            endValue: 100
        },
        value: 31,
        subvalues: [34.5, 53, 12.34, 84, 73],
        subvalueIndicator: {
            color: 'goldenrod'
        },
        tooltip: {
            enabled: true,
            customizeTooltip: function () {
                if (this.value > 50) {
                    return {
                        color: 'bisque'
                    }
                }
            }
        }
    });
});

enabled

Specifies whether or not tooltips are enabled in the gauge.

Type: Boolean
Default Value: false

Show Example:
jQuery

Use the check box under the gauge to enable/disable tooltips. Hover over the green range bar to see the changes.

<div id="linearGaugeContainer" style="height:150px;max-width:700px;margin:0px auto"></div>
<div id="checkboxContainer" style="height:20px;max-width:300px;margin:5px auto;font-family:'Trebuchet MS',Arial,sans-serif;font-size:14px;text-align:center">
    <input type="checkbox" id="enableTooltipCheckbox" checked> Enable Tooltip
</div>
$(function () {
    $('#linearGaugeContainer').dxLinearGauge({
        rangeContainer: { backgroundColor: 'blue' },
        scale: {
            startValue: 0,
            endValue: 100
        },
        valueIndicator: {
            type: 'rangeBar',
            color: 'green'
        },
        tooltip: {
            enabled: true
        },
        value: 42
    });

    $('#enableTooltipCheckbox').change(function () {
        var gauge = $('#linearGaugeContainer').dxLinearGauge('instance');
        gauge.option({
            tooltip: {
                enabled: this.checked
            }
        });
    });
})

font

Specifies font options for the text displayed by tooltips.

Type: Object

Show Example:
jQuery

In this example, the tooltip font options are changed.

<div id="linearGaugeContainer" style="height:150px;max-width:700px;margin:0 auto"></div>
$(function () {
    $('#linearGaugeContainer').dxLinearGauge({
        rangeContainer: { backgroundColor: 'lightsteelblue' },
        scale: {
            startValue: 0,
            endValue: 100
        },
        valueIndicator: {
            type: 'rangeBar',
            color: 'blanchedalmond'
        },
        tooltip: {
            enabled: true,
            font: {
                color: 'deepskyblue',
                family: 'Zapf-Chancery, cursive',
                size: 20,
                weight: 700
            }
        },
        value: 42.73
    })
})

format

Specifies a format for the text displayed in a tooltip.

Type: String
Default Value: undefined
Accepted Values: 'currency' | 'fixedPoint' | 'percent' | 'decimal' | 'exponential' | 'largeNumber' | 'thousands' | 'millions' | 'billions' | 'trillions'

Tooltips display scale values. You can apply formatting to the tooltip text using one of the numeric formats.

NOTE: You can set a precision for the tooltip text using the precision option.

In addition to predefined formats, you can utilize format tokens from the Globalize JavaScript library to assign a custom format.

For details on formatting, refer to the Data Formatting topic.

Show Example:
jQuery

In this example, the tooltip value is displayed in a thousands format with a precision of 2.

<div id="linearGaugeContainer" style="height:150px;max-width:700px;margin:0 auto"></div>
$(function () {
    $('#linearGaugeContainer').dxLinearGauge({
        rangeContainer: { backgroundColor: 'lightskyblue' },
        scale: {
            startValue: 0,
            endValue: 2000
        },
        valueIndicator: {
            type: 'rangeBar',
            color: 'yellowgreen'
        },
        tooltip: {
            enabled: true,
            format: 'thousands',
            precision: 2
        },
        value: 1459
    })
})

opacity

Specifies the opacity of a tooltip.

Type: Number
Default Value: undefined

Show Example:
jQuery

In this example, tooltips are displayed with a 0.45 opacity.

<div id="linearGaugeContainer" style="height:150px;max-width:700px;margin:0 auto"></div>
$(function () {
    $("#linearGaugeContainer").dxLinearGauge({
        rangeContainer: { backgroundColor: 'dodgerblue' },
        scale: {
            startValue: 0,
            endValue: 100
        },
        value: 31,
        subvalues: [34.5, 53, 12.34, 84, 73],
        tooltip: {
            enabled: true,
            opacity: 0.45
        }
    });
});

paddingLeftRight

Specifies a distance from the tooltip's left/right boundaries to the inner text in pixels.

Type: Number
Default Value: 18

TooltipPadding ChartJS

paddingTopBottom

Specifies a distance from the tooltip's top/bottom boundaries to the inner text in pixels.

Type: Number
Default Value: 15

TooltipPadding ChartJS

precision

Specifies a precision for the formatted value displayed in a tooltip.

Type: Number
Default Value: undefined

This option's value must be an integer indicating the number of digits to show in the scale value displayed in a tooltip. The value of this option is used when the tooltip displays a scale value with an applied format. To learn how to set a format for the tooltip text, refer to the format option description.

For general information on data formatting, refer to the Data Formatting topic.

Show Example:
jQuery

In this example, the tooltip value is displayed in a thousands format with a precision of 2.

<div id="linearGaugeContainer" style="height:150px;max-width:700px;margin:0 auto"></div>
$(function () {
    $('#linearGaugeContainer').dxLinearGauge({
        rangeContainer: { backgroundColor: 'lightskyblue' },
        scale: {
            startValue: 0,
            endValue: 2000
        },
        valueIndicator: {
            type: 'rangeBar',
            color: 'yellowgreen'
        },
        tooltip: {
            enabled: true,
            format: 'thousands',
            precision: 2
        },
        value: 1459
    })
})

shadow

Specifies options of the tooltip's shadow.

Type: Object