tooltip

Specifies options for gauge tooltips.

Type: Object

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

View Demo

Show Example:
jQuery

In this example, several options of tooltips are changed. Hover over any bar to see its tooltip.


                                    

                                    

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.


                                    

                                    

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.


                                    

                                    

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.


                                    

                                    

container

Specifies the container to draw tooltips inside of it.

Default Value: undefined

By default, tooltips are shown within the body DOM element. Use this option if you need to specify another container for tooltips.

customizeText

Deprecated

Use the customizeTooltip option instead.

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

Type: function

When implementing a callback function for this option, you can access the value indicated by a bar. To learn how to do this, see to the customizeTooltip option description.

customizeTooltip

Allows you to change tooltip appearance.

Type: function(barValue)
Function parameters:
barValue: Object
Defines a value indicated by a bar.
Return Value: Object
The text or markup to be displayed in a tooltip, along with that tooltip's color.

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.

  • html
    Specifies the HTML markup displayed by a tooltip.

When implementing a callback function for this option, you can use the value indicated by a bar. This value can be accessed using the object passed as the function's parameter or the this object. You can use the following fields of these objects.

  • value
    Specifies the value indicated by a bar.

  • valueText
    Specifies the value with an applied format if the format and precision (optional) options are specified.

  • index
    Specifies the index of the hovered bar starting with zero. The closer this bar is to the gauge's center, the greater its index.

To review text customization in greater detail, refer to the Provide a Custom Text topic.

Show Example:
jQuery

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


                                    

                                    

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 a bar to see the changes.


                                    

                                    

font

Specifies font options for the text displayed by tooltips.

Type: Object

Show Example:
jQuery

In this example, several font options of tooltips are changed. Hover over any bar to see its tooltip.


                                    

                                    

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, a tooltip displays a bar value in the 'fixedPoint' format with a precision of 2. Hover over any bar to see its tooltip.


                                    

                                    

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.


                                    

                                    

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, a tooltip displays a bar value in the 'fixedPoint' format with a precision of 2. Hover over any bar to see its tooltip.


                                    

                                    

shadow

Specifies options of the tooltip's shadow.

Type: Object

zIndex

Specifies the z-index for tooltips.

Type: Number
Default Value: undefined

If the widget's container has a CSS z-index property and tooltips are displayed incorrectly, you can configure the tooltips' z-index by using this option.