Why Is My Tooltip Not Showing Up?

I have made a map with D3 and using some data from nasa.gov(https://data.nasa.gov/resource/y77d-th95.geojson) Here is the codepen http://codepen.io/redixhumayun/full/VPepqM/ I hav

Solution 1:

You have three problems here:

First, set the position of the <div> to absolute in the CSS:

position: absolute;

Second, the biggest problem: you cannot append a <div> to an SVG. The good news is that you don't need to (since we just set the tooltip div to an absolute position). So, append the div to the body:

var div = d3.select("body")
    .append('div')
    .attr('class', 'tooltip')
    .style('opacity', 0.7);

Third problem: set the pointer-events to none or move the tooltip a little bit to the right, otherwise it will get in the way of your mouseover event:

.style('left', d3.event.pageX + 10 + 'px')

This is your updated CodePen: http://codepen.io/anon/pen/GrqKBY?editors=0110

Solution 2:

http://codepen.io/anon/pen/YNWKpr

var div = svg.append('foreignObject').append('xhtml:div')
    .attr('class', 'tooltip')
    .style('opacity', 0.7);

You have to wrap non-svg elements in a foreignObject tag, and you have to specify the html namespace when appending html elements.