tooltip

Specifies tooltip options.

Type: Object

A tooltip is a small pop-up rectangle that displays information about a widget when it is hovered over. You can enable or disable a tooltip, change its default appearance and format or customize the displayed text using the options of the tooltip configuration object.

NOTE
A tooltip is displayed outside the widget's container. If you plan to use the tooltip, make sure there is enough space around your widget to display it. For example, you can apply a margin to the widget's container to reserve the area around the widget for the tooltip.

View Demo

Show Example:
jQuery

In this example, several tooltip options are altered. The tooltip is colored in 'seashell' using the color option. The main and target values are displayed in the 'fixedPoint' format with a precision of 2. In addition, tooltip font options are changed.


                                    

                                    

arrowLength

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

Type: Number
Default Value: 10

Show Example:
jQuery

In this example, a tooltip has 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 a color for the tooltip.

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)
Show Example:
jQuery

In this example, the tooltip is colored in 'orange'.


                                    

                                    

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 by the tooltip.

Type: function

When implementing a callback function for this option, you can access the main and target bullet values. To learn how to do this, refer to the customizeTooltip option description.

customizeTooltip

Allows you to change tooltip appearance.

Type: function(pointsInfo)
Function parameters:
pointsInfo: Object
Defines different types of values indicated by the widget.
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 access the main and target bullet values. For this purpose, use the following fields of the this object.

  • originalValue
    Contains the primary bullet value as it is assigned to the value option.
  • value
    Contains the primary bullet value with applied formatting if the format and precision (optional) options are specified.
  • originalTarget
    Contains the target bullet value as it is assigned to the target option.
  • target
    Contains the target bullet value with applied formatting if the format and precision (optional) options are specified.

The function's parameter represents the same object as the this object. If appropriate, you can use the function's parameter to obtain the main and target bullet values.

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

Show Example:
jQuery

In this example, you can change the bullet value using the buttons below. While this value is under the target value, a tooltip has the default color, but once it exceeds the target value, the tooltip becomes painted in 'orangered'.


                                    

                                    

enabled

Specifies whether or not the tooltip is enabled.

Type: Boolean
Default Value: true

Show Example:
jQuery

Toggle the check box below to enable/disable the tooltip. Hover over the bullet to see the changes.


                                    

                                    

font

Specifies font options for the text displayed by the tooltip.

Type: Object

Show Example:
jQuery

In this example, several font options of the tooltip text are changed.


                                    

                                    

format

Specifies a format for the text displayed by the tooltip.

Type: String
Default Value: ''
Accepted Values: 'currency' | 'fixedPoint' | 'percent' | 'decimal' | 'exponential' | 'largeNumber' | 'thousands' | 'millions' | 'billions' | 'trillions' | 'longDate' | 'longTime' | 'monthAndDay' | 'monthAndYear' | 'quarterAndYear' | 'shortDate' | 'shortTime' | 'millisecond' | 'day' | 'month' | 'quarter' | 'year'

By default, the tooltip displays the main and target values combined. You can apply formatting to both of these values using one of the available formats. In addition, you can specify a precision for the main and target values displayed by a tooltip using the precision option.

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

Show Example:
jQuery

In this example, the main and target values are displayed in the 'fixedPoint' format with a precision of 2.


                                    

                                    

horizontalAlignment

Deprecated

Tooltip alignment is no longer useful because the tooltips are aligned automatically.

Specifies how a tooltip is horizontally aligned relative to the graph.

Type: String
Default Value: undefined
Accepted Values: 'left' | 'center' | 'right'

opacity

Specifies the opacity of a tooltip.

Type: Number
Default Value: undefined

Show Example:
jQuery

In this example, a tooltip is 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 formatted values displayed by the tooltip.

Type: Number
Default Value: 0

This option accepts an integer number indicating how many digits to show in the values displayed by a tooltip. To learn how to set a format for these values, 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 displays the main and target values in the 'fixedPoint' format with a precision of 1.


                                    

                                    

shadow

Specifies options of the tooltip's shadow.

Type: Object

verticalAlignment

Deprecated

Tooltip alignment is no longer useful because the tooltips are aligned automatically.

Specifies how a tooltip is vertically aligned relative to the graph.

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

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.