How to add hover (tooltip) to the D3. bubble motion chart?

Question

I am using the template of the motion chart in D3 to create something similar. It works, but I need to do more work on it. One thing is to show the tooltip that contains all of x , y, and radius info in it. I want the tooltip to show up when the mouse moves over each bubble. Does anyone know how to do that? Thank you. The source page you can find at https://github.com/mbostock/bost.ocks.org/blob/gh-pages/mike/nations/index.html

Here is what I did:

    var tooltip = d3.select("body")
    .append("div")
    .style("position", "absolute")
    .style("z-index", "10")
    .style("visibility", "hidden")
    .text("a simple tooltip");

    tooltip.text("my tooltip text");

    var dots = svg.append("g")
        .attr("class", "dots");

    var dot = dots.selectAll(".dot")
        .data(interpolateData(1990))
        .enter().append("circle")
        .attr("class", "dot")
        .style("fill", function (d) {
            return colorScale(color(d));
        })
        .on("mouseover", function(d){return tooltip.style("visibility", "visible");})
        .on("mousemove", function(d){return tooltip.style("top",(d3.event.pageY-10)+"px").style("left",(d3.event.pageX+10)+"px");})
        .on("mouseout", function (d){return tooltip.style("visibility", "hidden");})

http://stackoverflow.com/questions/10805184/d3-show-data-on-mouseover-of-circle/10806220#10806220 — Lars Kotthoff, Aug 14 '14 at 17:20
Thank you Lars. I looked that before, but it still did not work for the motion chart. Could you give me more specific help for this chart? Really appreciate! — Joseph Feng, Aug 14 '14 at 17:32
It doesn't get more specific than that -- what have you tried, and what didn't work? — Lars Kotthoff, Aug 14 '14 at 17:51
I have re-write my question and add in the code in it. Please take a look. Thank you. — Joseph Feng, Aug 14 '14 at 18:45
What you're doing is nothing like the answer I've linked to. Append the `title` element to the `circle`, not a `text` element. — Lars Kotthoff, Aug 14 '14 at 19:04
I updated the code again. So far it is the only way works. But instead of text, I need the tooltip to return the bubble name, x,y and more information. Do you know how to adjust the code based on what I have posted? Thank you. — Joseph Feng, Aug 14 '14 at 21:50
You're trying to mix SVG and HTML, which is probably not the best idea in the world. The answer that Lars linked to uses SVG's built-in `title`, which shows up as a tooltip. If you insist on your approach, you can probably set the `tooltip.text` from inside your `mouseover`, `mousemove` and `mouseout` handlers; `.on("mouseover", function(d){ tooltip.text(d.name); return tooltip.style("visibility", "visible");})` — Frank van Puffelen, Aug 15 '14 at 16:18

score 4 · Accepted Answer · edited May 23 '17 at 11:46

You're trying to mix SVG and HTML, which is probably not the best idea in the world. The answer that Lars linked to uses SVG's built-in title, which shows up as a tooltip.

You can easily accomplish this in your chart, by adding these calls after .call(position):

.append('svg:title')
.text(function(d) { return d.name; });

If you insist on mixing HTML into the SVG mix, you can set the tooltip.text from inside your mouseover event handler:

.on("mouseover", function(d){ 
  tooltip.text(d.name); 
  return tooltip.style("visibility", "visible");
})

This jsbin contains both approaches: http://jsbin.com/zexiz/2/edit?js,output

HenryLau · Answer 2 · 2015-03-10T19:21:43.053

To add the toolstips using tipsy:

Add the jquery and tipsy css which you can grab from here

<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.2.min.js"></script> 
<script type="text/javascript" src="jquery.tipsy.js"></script>
<link href="tipsy.css" rel="stylesheet" type="text/css" />

Then after the code where the dots are added place the tipsy bits

// Add a dot per nation. Initialize the data at 1800, and set the colors.
var dot = svg.append("g")
      .attr("class", "dots")
    .selectAll(".dot")
      .data(interpolateData(1962))
    .enter().append("circle")
      .attr("class", "dot")
      .style("fill", function(d) { return colorScale(color(d)); })
      .call(position)
      .sort(order);


  //tipsy tooltip
  $('circle').tipsy({ 
    gravity: $.fn.tipsy.authEW, 
    html: true,
    title: function() { 
    var d = this.__data__, c = d.name;
    return d.name; }});

You'll have to adjust the style.css which is used on bost.ocks.org to make the tooltips appear in the right place

.ocks-org body {
  background: #fcfcfa;
  color: #333;
  font-family: "PT Serif", serif;
  /* margin: 1em auto 4em auto; this screws up tooltips*/
  position: relative;
  width: 960px;
}

How to add hover (tooltip) to the D3. bubble motion chart?

2 Answers2

Linked