D3 binding data to SVG tooltip

Question

Id like to use this tooltip from this answer however I can't figure out how to bind data to it.

In this example I'd like to have two circles, that on hover show their size value as text.

watch.csv

circle,size
green,5
yellow,10

code

d3.csv("watch.csv", function(error, watch) {

  var tooltip = d3.select("body")
    .append("div")
    .style("position", "absolute")
    .style("z-index", "10")
    .style("visibility", "hidden")
    .text(function(d) { return d.size; })    //TRYING THIS

  var sampleSVG = d3.select(".example_div")
    .append("svg:svg")
    .attr("class", "sample")
    .attr("width", 300)
    .attr("height", 300);

  d3.select(".example_div svg")
    .data(watch)                  //AND THIS
    .enter()                      
    .append("svg:circle")
    .attr("stroke", "black")
    .attr("fill", "aliceblue")
    .attr("r", 30)
    .attr("cx", 52)
    .attr("cy", 52)
    .on("mouseover", function() {
      return tooltip.style("visibility", "visible");
    })
    .on("mousemove", function() {
      return tooltip.style("top", (d3.event.pageY - 10) + "px").style("left", (d3.event.pageX + 10) + "px");
    })
    .on("mouseout", function() {
      return tooltip.style("visibility", "hidden");
    });


});

Plunker

Gerardo Furtado · Accepted Answer · 2016-04-24T07:09:00.880

Change your tooltip var for this:

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

Style your tooltip in the CSS, using the selector .someTooltip.

And change all your "mouseove", "mousemove" and "mouseout" for this:

.on("mousemove", function(d) {
     tooltip.html("The size is: " + d.size)
    .style("top", (d3.event.pageY - 10) + "px")
    .style("left", (d3.event.pageX + 10) + "px")
    .style("opacity", 1);
}).on("mouseout", function(){
    tooltip.style("opacity", 0);
});

score 0 · Answer 2 · answered Apr 24 '16 at 01:00

First you need to add jquery and tipsy which is a jquery plugin.

  <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.2.min.js"></script> 
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.tipsy/1.0.3/jquery.tipsy.js"></script>

tipsy css

<link href="https://cdnjs.cloudflare.com/ajax/libs/jquery.tipsy/1.0.3/jquery.tipsy.css" rel="stylesheet" type="text/css" />

Next you need to bind the data to the tipsy jquery way like this.

$('svg circle').tipsy({ //select all circles
    gravity: 'w', 
    html: true, 
    title: function() {
      var d = this.__data__;//get the data from the dom
      return 'Hi there! My color is <span style="color:' + d.circle + '">' + d.size + '</span>'; //make the tipsy tool tip using the data
    }
  });

Remove all the tooltip code like this as that is not needed:

 .on("mouseover", function() {
      return tooltip.style("visibility", "visible");
    })
    .on("mousemove", function() {
      return tooltip.style("top", (d3.event.pageY - 10) + "px").style("left", (d3.event.pageX + 10) + "px");
    })
    .on("mouseout", function() {
      return tooltip.style("visibility", "hidden");
    });

Remove this

var tooltip = d3.select("body")
    .append("div")
    .style("position", "absolute")
    .style("z-index", "10")
    .style("visibility", "hidden")
    .text(function(d) { return d.size; })    //TRYING THIS

So your code will look like this here

D3 binding data to SVG tooltip

2 Answers2