CODEWITHSUNDEEP
javascripthtmlcssd3.jsdatamaps
Riley Shaw
Riley Shaw

Reputation: 321

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.)

Upvotes: 1

Views: 1066

Answers (2)

Riley Shaw
Riley Shaw

Reputation: 321

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;
}

Upvotes: 2

Eric Hoose
Eric Hoose

Reputation: 101

The hoverover popup is attached to the dom via the datamaps-hoverover class. By default, d3 sets this position: absolute, with top and left attributes being set dynamically based on where the mouse is. Since the position is absolute, it shouldn't matter that you have the map centered.

For example, I added your css (while renaming the id to match the example):

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

to the jsbin that datamaps uses as an example here.

As you can see, the popup is still in the correct spot even though the map is centered.

Upvotes: 1

Related Questions