Learn how to add a tooltip to Syncfusion React Maps and customize it with 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 React 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 a tooltip in Maps, import the MapsTooltip module from the React maps package. Inject it into the services. Then, enable the visible property in the tooltipSettings to show the tooltip. The valuePath property in the tooltip takes the field name that presents in the data source and displays that value as tooltip text. The tooltipDisplayMode property is used to change the display mode of the tooltip to MouseMove, Click, or DoubleClick. By default, tooltipDisplayMode is set to MouseMove.

Tutorial videos: https://www.syncfusion.com/tutorial-v...

Download the example from GitHub:
https://github.com/SyncfusionExamples...

TRIAL LICENSE KEY
---------------------- 
If you need a trial license key, start your React trial from https://www.syncfusion.com/account/ma... under your Syncfusion account. Then, you can obtain your trial license key from the downloads page.

Check your eligibility for a free license for all Essential Studio products on our Community License page: https://www.syncfusion.com/products/c...

BOOKMARK DETAILS
----------------------- 
[00:00] Introduction
[01:07] Enable tooltip
[01:51] Customize tooltip
[02:45] Change tooltip display mode
[03:31] Format tooltip
[04:04] Tooltip template

REACT MAPS
--------------
Product overview: https://www.syncfusion.com/react-comp...
Examples: https://ej2.syncfusion.com/react/demo...
Documentation: https://ej2.syncfusion.com/react/docu...
Download free trial: https://www.syncfusion.com/downloads/...
npmjs package: https://www.npmjs.com/package/@syncfu...

SUBSCRIBE
-------------
Syncfusion on YouTube:    / syncfusioninc    
Sign up to receive email updates: https://www.syncfusion.com/account/em...

SOCIAL COMMUNITIES
-----------------------------
Facebook:   / syncfusion    
X:   / syncfusion   
LinkedIn:   / syncfusion  
Instagram:   / syncfusionofficial  

#react #maps #tooltips