Learn D3.js

Adding tooltips

You might be interested in knowing the name of a country that has a particular HDI and its precise value. We can't place all that data on the world map since it would be unreadable, but we can add a tooltip that reveals the data as the mouse hovers over the country. Let's do it. First create some CSS styles for the tooltip:

#tooltip {    pointer-events: none;}#tooltip rect {    fill: white;    fill-opacity: .7;    stroke: black;    stroke-width: .5;}#tooltip text {    font-family: "Yanone Kaffeesatz", "Arial Narrow", sans-serif;    font-size: 12px;    text-anchor: middle;}

To inform the category linked to each HDI value, add the following array:

const labels = ["No data","Very Low","Low","Medium","High","Very High"];

The tooltip is created as a hidden ...