Interactive Charts with D3

To show a tooltip when a user hovers a bar, we’ll need to trigger changes under two circumstances:

Thankfully, d3 selection objects have an method that will execute a function when an event is triggered. There are actually two things wrong here, let’s focus on the first:

If we look at the CSS, our tooltip is absolutely positioned:

Absolutely positioned elements are positioned relative to their containing block. There are several ways to use CSS to position an element using percent, and each way uses the percent of a different value:

Since we want to shift our tooltip by its own height and width, we’ll need to use the CSS property.

Source: wattenberger.netlify.com