From the course: D3.js Essential Training

Unlock this course with a free trial

Join today to access over 24,900 courses taught by industry experts.

Solution: Hovering and tool tips

Solution: Hovering and tool tips - D3.js Tutorial

From the course: D3.js Essential Training

Start my 1-month free trial Buy for my team

Solution: Hovering and tool tips

“

(upbeat music) - [Instructor] And here's our final solution video. So as a reminder, the challenge involved making two bits of animation on these bars. The first one is on hover, I wanted them to highlight, and that could mean a change of fill or a change of opacity or something, and the second is I wanted you to add a tooltip showing the value of the bar when we hover. So the first one I think is most easily dealt with using CSS. It really is as easy as that. And that's half of our challenge done, but the other half is a little bit more complicated. Okay, when it comes to tooltips, there's lots of different ways of doing things. You see people adding a div and then changing the visibility of the div or people adding a rectangle element and changing the coordinates of it, and that's more in line with what we are going to do. So we're going to add a group because tooltip should have a rectangle and text kind of co-located. So this will mean that we only have to change one set of…

Contents