D3 tooltip wanted (is that 15 chars now?)

1

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?

2

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.

1 Like
3

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.

4

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.

5

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

6

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

7

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