Why is my tooltip not showing up?

Question

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 have tried making a tooltip with the following code.

//setting up the tooltip here
var div = svg.append('div')
    .attr('class', 'tooltip')
    .style('opacity', 0.7);

var meteorites = meteorite.selectAll('circle')
        .data(data.features)
        .enter()
        .append('circle')
        .attr('cx', function(d) {
            return projection([d.properties.reclong, d.properties.reclat])[0]
        })
        .attr('cy', function(d) {
            return projection([d.properties.reclong, d.properties.reclat])[1]
        })
        .attr('fill', function(d) {
            return color_scale(d.properties.mass)
        })
        .attr('stroke', 'black')
        .attr("stroke-width", 1)
        .attr('r', function(d) {
            return weight_scale(d.properties.mass);
        })
        .attr('fill-opacity', function(d) {
            if (weight_scale(d.properties.mass) > 7) {
                return 0.5
            }
            return 1;
        })
        .on('mouseover', function(d) {
            div.transition().duration(200)
                .style('opacity', 0.9)
                .style('left', (d3.event.pageX) + 'px')
                .style('top', (d3.event.pageY / 1.5) + 'px')
            div.html('<p>Please show up</p>');
        }).on('mouseout', function(d){
          div.transition().duration(200)
             .style('opacity', 0);
        })

However, the tooltip does not show up. I even tried changing the z-index of the tooltip to be greater than that of the underlying map so that it wouldn't be hidden by the map, but no luck.

When I inspect the tooltip in the elements inspector, it shows that the style, left and top attributes of the tooltip div are changing, but I can't seem to see it on the screen. Not sure what I'm doing wrong here.

did you see http://stackoverflow.com/questions/20070919/adding-tooltip-in-d3-js-map ? — roberto tomás, Jan 12 '17 at 21:50

Gerardo Furtado · Accepted Answer · 2017-01-13T00:58:16.670

6

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

edited Jan 13 '17 at 00:58

answered Jan 13 '17 at 00:42

Gerardo Furtado

100,839
9
121
171

Why did I need to set my div to position: absolute? – random_coder_101 Jan 14 '17 at 17:28
Because d3.event.page is relative to the whole document, not to the SVG: http://bl.ocks.org/mbostock/1087001 – Gerardo Furtado Jan 15 '17 at 01:10

score -1 · Answer 2 · answered Jan 13 '17 at 00:22

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.

Why is my tooltip not showing up?

2 Answers2

Linked