Tooltip not showing in d3 latest version

Community Help
1

Hi,

I created a map here: link and the custom tooltip works fine in d3@5 but not showing up in later version.

Can anyone help?

Thanks

2

See D3 6.0 migration guide / D3 / Observable

3

The mouseenter function should be e,d not just d as that would put the event in d

    .on('mouseenter', function(e,d) {   // event, data element, 'this' is a svg path for the country

      d3.select(this)
        .transition()
        .delay(100)
        .style("fill", colors.day);

      tooltip.html(
          `<div><strong>DST in ${d.properties.Country}</strong></br>
           <u>Observed from</u>: ${d.properties.Introduced}</br>
           <u>Location</u>: ${d.properties.Observed}</br>
           <u>Next change</u>: ${d.properties.Next_change}</div>`)
           return tooltip.style('visibility', 'visible');
    })

This other bug is here:

   .on('mousemove', function () {
          tooltip
            .style('top', d3.event.pageY - 10 + 'px')
           .style('left', d3.event.pageX + 10 + 'px');
    });

image

That can be fixed with:

   .on('mousemove', function (e) {
          tooltip
            .style('top', e.clientY - 10 + 'px')
           .style('left', e.clientX + 10 + 'px');
    });
1 Like
4

Many thanks for your detailed instruction!

1 Like