Configuration 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. To show tooltips, do the following.

  • Enable tooltips. Set the enabled option to true.

  • Specify text to be displayed in tooltips. Specify the customizeToolitp option.

You can also change tooltip default appearance using the options of the tooltip configuration object.

View Demo

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.

<div id="mapContainer" style="height:500px; max-width:800px; margin: 0 auto"></div>
var i = 0;

$(function () {
    $('#mapContainer').dxVectorMap({
        mapData: '/Content/data/vectorMap-sources/world.txt',
        areaSettings: {
            palette: 'Ocean',
            paletteSize: 5,
            customize: function () {
                return {
                    paletteIndex: i++ % 5
                };
            }
        },
        tooltip: {
            enabled: true,
            border: { color: 'royalblue' },
            customizeTooltip: function () {
                return {
                    text: this.attribute('name')
                };
            },
            font: {
                color: 'dodgerblue'
            }
        }
    });
});

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.

<div id="mapContainer" style="height:500px; max-width:800px; margin: 0 auto"></div>
var i = 0;

$(function () {
    $('#mapContainer').dxVectorMap({
        mapData: '/Content/data/vectorMap-sources/world.txt',
        areaSettings: {
            palette: 'Soft Pastel',
            paletteSize: 5,
            customize: function () {
                return {
                    paletteIndex: i++ % 5
                };
            }
        },
        tooltip: {
            enabled: true,
            customizeTooltip: function () {
                return {
                    text: this.attribute('name')
                };
            },
            arrowLength: 5
        }
    });
});

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.

<div id="mapContainer" style="height:500px; max-width:800px; margin: 0 auto"></div>
var i = 0;

$(function () {
    $('#mapContainer').dxVectorMap({
        mapData: '/Content/data/vectorMap-sources/world.txt',
        areaSettings: {
            palette: 'Violet',
            paletteSize: 5,
            customize: function () {
                return {
                    paletteIndex: i++ % 5
                };
            }
        },
        tooltip: {
            enabled: true,
            customizeTooltip: function () {
                return {
                    text: this.attribute('name')
                };
            },
            border: {
                color: 'plum',
                opacity: 0.5,
                width: 2
            }
        }
    });
});

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.

<div id="mapContainer" style="height:500px; max-width:800px; margin: 0 auto"></div>
var i = 0;

$(function () {
    $('#mapContainer').dxVectorMap({
        mapData: '/Content/data/vectorMap-sources/world.txt',
        areaSettings: {
            palette: 'Ocean',
            paletteSize: 5,
            customize: function () {
                return {
                    paletteIndex: i++ % 5
                };
            }
        },
        tooltip: {
            enabled: true,
            customizeTooltip: function () {
                return {
                    text: this.attribute('name')
                };
            },
            color: 'lavender'
        }
    });
});

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

Specifies text and appearance of a set of 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
The text or markup to be displayed in a tooltip, along with that tooltip's color.
Default Value: undefined
Cannot be used in themes.

This option should be assigned a function that returns a specific object. The following fields can be specified in this object.

  • text
    Specifies the text displayed by a tooltip. This is an obligatory option. If this option is not specified, the tooltip will not be shown.

  • html
    Specifies the HTML markup displayed by a tooltip.

  • color
    Specifies the color of 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.

<div id="mapContainer" style="height:500px; max-width:800px; margin: 0 auto"></div>
var i = 0;

$(function () {
    $('#mapContainer').dxVectorMap({
        mapData: '/Content/data/vectorMap-sources/world.txt',
        areaSettings: {
            palette: 'Ocean',
            paletteSize: 5,
            customize: function () {
                return {
                    paletteIndex: i++ % 5
                };
            }
        },
        tooltip: {
            enabled: true,
            customizeTooltip: function () {
                return {
                    text: this.attribute('name')
                };
            }
        }
    });
});

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.

<div id="mapContainer" style="height:500px; max-width:800px; margin: 0 auto"></div>
<div id="checkboxContainer" style="height:20px;max-width:300px;margin:10px auto;font-family:'Trebuchet MS',Arial,sans-serif;font-size:14px;text-align:center">
    <input type="checkbox" id="enableTooltipCheckbox" checked> Enable Tooltip
</div>
$(function () {
    $('#mapContainer').dxVectorMap({
        mapData: '/Content/data/vectorMap-sources/world.txt',
        tooltip: {
            enabled: true,
            customizeTooltip: function () {
                return {
                    text: this.attribute('name')
                };
            }
        }
    });

    $('#enableTooltipCheckbox').change(function () {
        var vectorMap = $('#mapContainer').dxVectorMap('instance');
        vectorMap.option({
            tooltip: {
                enabled: this.checked
            }
        });
    });
});

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.

<div id="mapContainer" style="height:500px; max-width:800px; margin: 0 auto"></div>
var i = 0;

$(function () {
    $('#mapContainer').dxVectorMap({
        mapData: '/Content/data/vectorMap-sources/world.txt',
        areaSettings: {
            palette: 'Soft Pastel',
            paletteSize: 5,
            customize: function () {
                return {
                    paletteIndex: i++ % 5
                };
            }
        },
        tooltip: {
            enabled: true,
            customizeTooltip: function () {
                return {
                    text: this.attribute('name')
                };
            },
            font: {
                color: 'coral',
                family: 'Verdana',
                opacity: 0.6,
                size: 16,
                weight: 100
            }
        }
    });
});

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.

<div id="mapContainer" style="height:500px; max-width:800px; margin: 0 auto"></div>
var i = 0;

$(function () {
    $('#mapContainer').dxVectorMap({
        mapData: '/Content/data/vectorMap-sources/world.txt',
        areaSettings: {
            palette: 'Soft Pastel',
            paletteSize: 5,
            customize: function () {
                return {
                    paletteIndex: i++ % 5
                };
            }
        },
        tooltip: {
            enabled: true,
            customizeTooltip: function () {
                return {
                    text: this.attribute('name')
                };
            },
            opacity: 0.45
        }
    });
});

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

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.