How to Show Tooltips in the Angular Maps Component

Learn how easily you can add a tooltip to Syncfusion Angular Maps and customize it with various built-in options. Using the Maps component, you can visualize the earth's surface and display static or interactive regions, zones, boundaries, or any geographic area over the land. The Syncfusion Angular Maps component offers a rich set of features, including markers, navigation lines, bubbles, zooming, panning, and drill-down functionality, allowing you to explore interactive zones with ease.

The tooltip displays details about a shape’s value on mouse hover. Tooltips are also displayed for markers and bubbles on a map. On mouse over or a touch event, the tooltip is used to get more information about the layer, bubble, or marker.

To enable tooltip in Maps, import the MapsTooltipService module from the angular maps package. And inject it into the Providers array of NG module. Then, enable the visible property in the tooltipSettings under the layers option to show the tooltips. The valuePath property in the tooltip takes the field name that presents in data source and displays that value as tooltip text. The tooltipDisplayMode property is used to change the display mode of the tooltip in Maps. The display modes of tooltip are available in the Maps component are MouseMove, Click and DoubleClick. By default, tooltipDisplayMode is set to MouseMove.

Download an example from GitHub:

Refer to the following tooltip documentation on the Syncfusion Angular Maps component:

Check out this online example of the Angular Maps component with a tooltip:

Watch the following video to get started with the Angular Maps component:

TRIAL LICENSE KEY
----------

BOOKMARK DETAILS
--------------
[00:00] Introduction
[01:30] Enable tooltip
[02:26] Customize tooltip
[03:26] Change tooltip display mode
[04:14] Format tooltip
[04:50] Tooltip template

ANGULAR MAPS
------------------

SUBSCRIBE
----------

SOCIAL COMMUNITIES
-------------

#angular #map #tooltips