Adding text tip to bar chart d3

Question

I'm trying to add text tooltips to each of my bars on my bar chart on mouseover. I am new to d3, so I'm having trouble with adding text. What I've tried is a combination of different strategies I've found online, but I'm still not getting a tip to show up. Not sure what I'm missing or where I went wrong. Any help is appreciated.

Thank you!

                    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))
                        })

                        // start tooltip
                        .on("mouseover", function(d){
                            console.log("D",scope.metric);

                            var xPos = parseFloat(d3.select(this).attr("x"));
                            var yPos = parseFloat(d3.select(this).attr("y"));
                            var height = parseFloat(d3.select(this).attr("height"))

                            d3.select(this)
                                .append("text")
                                .attr("class", "d3tip")
                                .attr("x",xPos)
                                .attr("y",yPos +height/2)
                                .text("test");
                            })
                        .on("mouseout",function(){
                            d3.select(".tooltip").remove();
                        });
                    // end tooltip

                    // removed data:
                    bar.exit().remove();
                    // updated data:
                    bar
                        .transition()
                        .duration(750)
                        .attr("y", function(d) { return y(eval('d.'+scope.metric)); })
                        .attr("height", function(d) { return height - y(eval('d.'+scope.metric)); });

You probably want https://stackoverflow.com/questions/10805184/d3-show-data-on-mouseover-of-circle/10806220#10806220 — Lars Kotthoff, Jun 11 '15 at 20:27

score 0 · Accepted Answer · edited May 23 '17 at 10:27

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");});

Adding text tip to bar chart d3

1 Answers1