score:0

Accepted answer

This answer got me where I needed to be.

Solution:

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

                    bar.enter()
                        .append("g")
                        .attr("class", "bar-container")
                        .append("rect")
                        .attr("class", "bar")
                        .attr('fill','#4EC7BD')
                        .attr("x", function(d) { return x(d.id); })
                        .attr("y", function(d) { return y(eval('d.'+scope.metric)); })
                        .attr("height", function(d) { return height - y(eval('d.'+scope.metric)); })
                        .attr("width", x.rangeBand())
                        .on('click', function(d){
                            scope.showDetails(d, eval('d.'+scope.metric))
                        })
                        // tooltip
                        .on("mouseover", function(d){
                            tooltip.text(eval('d.'+scope.metric));
                            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");});

Related Query

More Query from same tag