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.

Show Example:
jQuery

In this example, several tooltip options are altered. The tooltip is colored in 'lavender' using the tooltip's color option. In addition, the tooltip text is painted blue and displayed with a size of 12.


                                    

                                    

color

Specifies a color for the tooltip.

Type: String
Default Value: '#666666'

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 'lightgray' using the color option.


                                    

                                    

customizeText

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

Type: function
Function parameters:
pointsInfo: Object

Defines different types of values indicated by a sparkline.

Return Value: String

The text to be displayed in a tooltip.

When implementing a callback function for this option, you can access different types of values indicated by a sparkline. For this purpose, use the following fields of the this object.

  • originalFirstValue
    Contains the first value of a sparkline as it is specified in a data source.
  • firstValue
    Contains the first value of a sparkline with applied formatting if the format and precision (optional) options are specified.
  • originalLastValue
    Contains the last value of a sparkline as it is specified in a data source.
  • lastValue
    Contains the last value of a sparkline with applied formatting if the format and precision (optional) options are specified.
  • originalMinValue
    Contains the minimum value of a sparkline as it is specified in a data source.
  • minValue
    Contains the minimum value of a sparkline with applied formatting if the format and precision (optional) options are specified.
  • originalMaxValue
    Contains the maximum value of a sparkline as it is specified in a data source.
  • maxValue
    Contains the maximum value of a sparkline with applied formatting if the format and precision (optional) options are specified.

The following fields are available for a sparkline of the 'winloss' type only.

  • originalThresholdValue
    Contains the threshold value of a winloss sparkline as it is assigned to the winlossThreshold option.
  • thresholdValue
    Contains the threshold value of a winloss sparkline 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, the text displayed by the tooltip is customized using the customizeText option.


                                    

                                    

enabled

Specifies whether or not the tooltip is enabled.

Type: Boolean
Default Value: true
Accepted Values: true | false

Show Example:
jQuery

Toggle the check box below to enable/disable the tooltip. Hover over the sparkline 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' | 'decimal' | 'exponential' | 'largeNumber' | 'thousands' | 'millions' | 'billions' | 'trillions'

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 sparkline values are displayed in the 'fixedPoint' format with a precision of 2.


                                    

                                    

horizontalAlignment

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

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

Show Example:
jQuery

Use the drop-down menu below to alter the tooltip | horizontalAlignment option. Hover over the sparkline to see the changes.


                                    

                                    

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 sparkline values are displayed in the 'fixedPoint' format with a precision of 2.


                                    

                                    

verticalAlignment

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

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

Show Example:
jQuery

Use the drop-down menu below to alter the tooltip | verticalAlignment option. Hover over the sparkline to see the changes.