score:0

Accepted answer

It seems imposible to rely on absolute tooltip positioning since a wordpress blog is always growing with new articles, messing with the d3.event.pageX and d3.event.pageY variables. Not to mention as a wordpress newbie, my knowledge about how wordpress system works is still lacking..

Instead of positioning the tooltip relative to the entire dynamic page itself (by means of d3.event.pageX and d3.event.pageY), i just append the tooltip directly onto the SVG on every mouse over, adjust the position using d3.mouse(this) as opposed to d3.event earlier, and delete the tooltip SVG element on mouse out event..

var countryText;

bubbles
  .on("mouseover", function(d){
     countryText = bubbleGroup.append("text")
        .attr("class", "countryText")
        .attr("font-size", 13)
        .attr("font-weight", "bold")
        .text(d.country)
        .style("pointer-events", "none")
        .attr("x", d3.mouse(this)[0] - 60)
        .attr("y", (d3.mouse(this)[1] - 20)); 
   })
  .on("mousemove", function(d){
     countryText
       .attr("x", d3.mouse(this)[0] - 60)
       .attr("y", (d3.mouse(this)[1] - 20));
   })
  .on("mouseout", function(d){
     d3.select(".countryText").remove();
   })

As you can see, this gives stable tooltip positioning wether if you see the article in the blog page, or if you access the article directly.


Related Query