CODEWITHSUNDEEP
javascriptcssd3.js
redixhumayun
redixhumayun

Reputation: 1844

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

Upvotes: 1

Views: 3665

Answers (2)

Gerardo Furtado
Gerardo Furtado

Reputation: 102194

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

Upvotes: 6

Eric Guan
Eric Guan

Reputation: 15982

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.

Upvotes: -1

Related Questions