javascripthtmlcssd3.jsdatamaps

Datamaps hover pop up

I'm using datamaps to display the countries of the world, but have the graph centered. When I hover over a country, the pop up appears all the way to the left, accurate to where the country would be if I didn't center it. I believe the issue is the css:

#map {
    margin: 0px auto;
    width: 700px;
}

But I don't know how to center it in a different way.

Is there any way to change where the pop up appears? Thanks in advance!

enter image description here

(I tried to add a code snippet, but it was getting an error for some reason.)

Solution

  • Changing the position to be relative works. As Eric Hoose's example shows, the <div> is relative, so the hover still works.

    #map {
    margin: 0px auto;
    width: 700px;
    position: relative;
}