Logo
DocsExamplesGitHubGetting started

Map chart with tooltip

Map chart showing a world map with tooltips using react-tooltip.

* The boundaries and the designations used on this map do not imply the expression of any opinion on the part of the react-simple-maps team or z creative labs and are used for illustrative purposes only. The boundaries and shapes are not part of the react-simple-maps library and are sourced from Natural Earth Data and gadm.org.

Overview

This example shows how to create a world map with tooltips using react-tooltip. The tooltip displays the name of the country and the population.

Caveats

Note that you have to use React.memo in order to prevent excessive rerendering when the content of the tooltip is set. Unfortunately it is not possible to set data-tip on a geography directly, therefore you have to set it on the ComposableMap.

Newsletter

Sign up to the React Simple Maps newsletter and be the first one to know when we publish new stuff.

Hire Us!

Are you looking for someone to create beautiful mapcharts?

Contact us

React Simple Maps

Home
Documentation
Examples
GitHub

More Tools

Check out these other design and development tools by z creative labs.

Blobmaker
Get Waves

© 2019 z creative labs