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 borderColor option. In addition, the tooltips' font color is set to 'dodgerblue' using the font | color option.


                                    

                                    

borderColor

Specifies a color for the tooltip border.

Type: String
Default Value: '#d7d7d7'

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 displayed with their borders colored in 'seagreen'.


                                    

                                    

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

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.

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 | customizeText option.


                                    

                                    

enabled

Specifies whether or not the tooltip is enabled.

Type: Boolean
Default Value: false
Accepted Values: true | 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.