tooltip

Configures the tooltip.

Type: Object

A tooltip is a miniature rectangle displaying widget data. The tooltip appears when the end-user hovers the cursor over the widget. You can enable/disable the tooltip, change its appearance and format its text using fields of the tooltip configuration object.

NOTE
The 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 '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, the 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 the color of tooltips.

Type: String
Default Value: '#ffffff'

This option supports the following colors.

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

Show Example:
jQuery

In this example, the tooltip is colored in 'lightgray' 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.

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. [note]If you are going to use external resources (for example, images) in the markup, specify the size of the area they will occupy beforehand.

  • fontColor
    Specifies the color of the text displayed by a tooltip.

  • borderColor
    Specifies the color of the tooltip border.

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 option is 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 option is 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

Enables tooltips.

Type: Boolean
Default Value: true

Show Example:
jQuery

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


                                    

                                    

font

Specifies the font of the text displayed by a tooltip.

Type: Object

Show Example:
jQuery

In this example, the font of the tooltip's text is changed.


                                    

                                    

format

Specifies the format of the value displayed by a tooltip.

Type: Format
Default Value: undefined
NOTE
DevExtreme widgets provide a wide choice of predefined formats. If you are, however, going to use custom formats, link the Globalize library to your project. Learn how to do this from the Installation topic.
See Also
  • format - provides a comprehensive overview of formatting capabilities.
  • Data Formatting - shows how to apply formatting to various widget elements.
Show Example:
jQuery

In this example, widget 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 tooltips.

Type: Number
Default Value: undefined

Show Example:
jQuery

In this example, the tooltip is displayed with a 0.45 opacity.


                                    

                                    

paddingLeftRight

Generates space on the left and the right of the text displayed by a tooltip.

Type: Number
Default Value: 18

TooltipPadding ChartJS

paddingTopBottom

Generates space above and below the text displayed by a tooltip.

Type: Number
Default Value: 15

TooltipPadding ChartJS

precision

Deprecated

Use the tooltip | format | precision option instead.

Specifies the precision of formatted values in a tooltip.

Type: Number
Default Value: undefined

shadow

Specifies the appearance 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 of tooltips.

Type: Number
Default Value: undefined

If the widget container has the CSS z-index property specified and tooltips are displayed incorrectly, configure the z-index of the tooltips using this option.