D3 tooltip wanted (is that 15 chars now?)

D3 tooltip wanted (is that 15 chars now?)


Something is wrong with my chart so I want to visualise what bar has what value.
So how can I add a tooltip on mouseover?


Basically you want to add some:

.on('mouseover', function() {})

on the bar to show and place and populate a designated tooltip <div>. You can also use d3 tip, a library made specifically for this.


I found this example. I didn’t really follow it. This is why I was asking for help with D3 a few days ago.
I will try the plugin you recommended if I am still stuck.


Basically you make a div outside of you svg and then hide it. Then when you mouseover a bar you set the position of the div to your mouse location and fill in the data, then unhide it.


yes, you can use opacity for example and mouseover events to show/hide


So how do you target DOM elements outside of the chart area? I was trying this using d3.select("#selected") but someone said you can’t do this (like you can with jQuery).

Same question to you @chemok78


I place the div with the tooltip inside the same container as where the chart is like so:

var tip = d3.select("#chart").append("div")
  .attr("class", "tooltip")
  .style("opacity", 0);

then you can use mouseover events in the D3 element you want the tooltip to show up by modifying the html + play with transition and opacity