tooltip

Specifies tooltip options.

Type: Object

A tooltip is a small pop-up rectangle that displays information about an area or a marker when it is hovered over. You can enable or disable a tooltip and change its default appearance using the options of the tooltip configuration object.

Show Example:
jQuery

In this example, tooltips display the name of the area that is currently hovered over. The tooltips' borders are colored in 'royalblue' using the border | color option. In addition, the tooltips' font color is set to 'dodgerblue' using the font | color option.


                                    

                                    

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.


                                    

                                    

borderColor

Deprecated

Use the border | color option instead.

Specifies a color for the tooltip border.

Type: String
Default Value: undefined

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)

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, tooltips are colored in 'lavender' using the color option.


                                    

                                    

customizeText

Deprecated

Use the customizeTooltip option instead.

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

Type: function(info)
Function parameters:
info: Area|Marker
Defines the area/marker for which a tooltip is about to be displayed.
Return Value: String
The text to be displayed in a tooltip.
Default Value: undefined

When implementing a callback function for this option, you can access the hovered area or marker. For this purpose, use the object passed as the function's parameter or the this object. To discover the members of the obtained object that can be used, see the Area or Marker class description of the Map Elements reference section.

customizeTooltip

Allows you to change the appearance of particular tooltips.

Type: function(info)
Function parameters:
info: Area|Marker
Defines the area/marker for which a tooltip is about to be displayed.
Return Value: Object
Specifies the text to be displayed in a tooltip and a color for the tooltip.
Default Value: undefined

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.

When implementing a callback function for this option, you can access the hovered area or marker. For this purpose, use the object passed as the function's parameter or the this object. To discover the members of the obtained object that can be used, see the Area or Marker class description of the Map Elements reference section.

Show Example:
jQuery

In this example, tooltips display the name of the area that is currently hovered over. This name is obtained within the function assigned to the tooltip | customizeTooltip option.


                                    

                                    

enabled

Specifies whether or not the tooltip is enabled.

Type: Boolean
Default Value: false

Show Example:
jQuery

Toggle the check box below to enable/disable tooltips. Hover over an area to see the effect.


                                    

                                    

font

Specifies font options for the text displayed by the tooltip.

Type: Object

Show Example:
jQuery

In this example, several font options for the tooltip text are changed. Hover over any area to see a 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

shadow

Specifies options of the tooltip's shadow.

Type: Object