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.


                                    

                                    

arrowLength

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

Type: Number
Default Value: 10

customizeText

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 property, use the scale value to be displayed in 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.

Show Example:
jQuery

In this example, the tooltip shows a custom tooltip text that includes two values, unformatted and formatted. This text is generated within the function assigned to the customizeText configuration option. To get the non-formatted value, the value field of the object passed as the function's parameter is used. To get the formatted value, the valueText field of this object is used. The function returns a concatenation of these values. Hover over the value indicator or one of the subvalue indicators to evoke its tooltip.


                                    

                                    

enabled

Specifies whether or not tooltips are enabled in the gauge.

Type: Boolean
Default Value: false
Accepted Values: true|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.


                                    

                                    

font

Specifies font options for the text displayed by tooltips.

Type: Object

Show Example:
jQuery

In this example, the tooltip font options are changed.


                                    

                                    

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.


                                    

                                    

paddingLeftRight

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

Type: Number
Default Value: 22

TooltipPadding ChartJS

paddingTopBottom

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

Type: Number
Default Value: 6

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.