I'm banging my head here. I want to display tooltips for the leaf nodes in a structure such as Zoomable Pack Layout. The leaf nodes are the brown ones. If I used the standard code for tooltips:

vis.selectAll("circle")
    .data(nodes)
   .enter()
    .append("svg:circle")
    .attr("class", function(d) {
        return d.children ? "parent" : "child";
    })
    .attr("cx", function(d) {
        return d.x;
    })
    .attr("cy", function(d) {
        return d.y;
    })
    .attr("r", function(d) {
        return d.r;
    })
    .on("click", function(d) {
        zoom(node == d ? root : d);
    })
    .append("svg:title")
    .text("test");          \\ Browser uses this for tooltips

I get tooltips on the primary circles but not on the leaf nodes. I tried:

.append("svg:title")
.text(function(d) {
    if(d.size){return 'test';}
});

...hoping that by returning something only when a varaible contained by leaf nodes is present may prevent the parent nodes from showing a tooltip but I'm afraid all it did was allow a hidden tooltip taht silently prevents anything from displaying.

Any thoughts? I figure I either need to stack the svg:circles so that the leaf nodes are in front of the others or attach svg:titles only to the leaf nodes but I'm not sure how to do that.

Here is a fiddle of the tooltips: Fiddle

I'm banging my head here. I want to display tooltips for the leaf nodes in a structure such as Zoomable Pack Layout. The leaf nodes are the brown ones. If I used the standard code for tooltips:

vis.selectAll("circle")
    .data(nodes)
   .enter()
    .append("svg:circle")
    .attr("class", function(d) {
        return d.children ? "parent" : "child";
    })
    .attr("cx", function(d) {
        return d.x;
    })
    .attr("cy", function(d) {
        return d.y;
    })
    .attr("r", function(d) {
        return d.r;
    })
    .on("click", function(d) {
        zoom(node == d ? root : d);
    })
    .append("svg:title")
    .text("test");          \\ Browser uses this for tooltips

I get tooltips on the primary circles but not on the leaf nodes. I tried:

.append("svg:title")
.text(function(d) {
    if(d.size){return 'test';}
});

...hoping that by returning something only when a varaible contained by leaf nodes is present may prevent the parent nodes from showing a tooltip but I'm afraid all it did was allow a hidden tooltip taht silently prevents anything from displaying.

Any thoughts? I figure I either need to stack the svg:circles so that the leaf nodes are in front of the others or attach svg:titles only to the leaf nodes but I'm not sure how to do that.

Here is a fiddle of the tooltips: Fiddle

• javascript
• svg
• d3.js
• tooltip
• circle-pack

• Can you add a jsfiddle of your stuff so far ? – Ian Commented Nov 14, 2013 at 7:30
• The circles should be stacked correctly already -- did you modify the way the layout is drawn from the example? – Lars Kotthoff Commented Nov 14, 2013 at 9:23

1 Answer 1

The problem is in fact not the code, but the CSS that prevents the leaf node circles from receiving pointer events. Simply remove

circle.child {
  pointer-events: none;
}

and it works fine. Complete example here.