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: https://github.com/SyncfusionExamples/how-to-show-tooltips-in-the-angular-maps-component Refer to the following tooltip documentation on the Syncfusion Angular Maps component: https://ej2.syncfusion.com/angular/documentation/maps/user-interactions#tooltip Check out this online example of the Angular Maps component with a tooltip: https://ej2.syncfusion.com/angular/demos/#/material/maps/tooltip Watch the following video to get started with the Angular Maps component: https://www.youtube.com/watch?v=NSr4LoVe6wA TRIAL LICENSE KEY ---------- If you need a trial license key, start an Angular trial from your Syncfusion account and then obtain a trial license key from the downloads page: https://www.syncfusion.com/account/manage-trials/start-trials. Check if you are eligible for a free license for all Essential Studio products on our Community License page: https://www.syncfusion.com/products/communitylicense. 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 ------------------ Product overview: https://www.syncfusion.com/angular-components/angular-maps-library Documentation: https://ej2.syncfusion.com/angular/documentation/maps/getting-started Online examples: https://ej2.syncfusion.com/angular/demos/#/bootstrap5/maps/default Download free trial: https://www.syncfusion.com/downloads/angular/confirm npmjs package: https://www.npmjs.com/package/@syncfusion/ej2-angular-maps SUBSCRIBE ---------- Syncfusion on YouTube: https://www.youtube.com/user/syncfusioninc Sign up to receive email updates: https://www.syncfusion.com/account/email-preference SOCIAL COMMUNITIES ------------- Facebook: https://www.facebook.com/Syncfusion/ Twitter: https://twitter.com/Syncfusion LinkedIn: https://www.linkedin.com/company/syncfusion Instagram: https://www.instagram.com/syncfusionofficial/ #angular #map #tooltips