From the course: D3.js Essential Training

Unlock this course with a free trial

Join today to access over 25,500 courses taught by industry experts.

Challenge: Hovering and tool tips

Challenge: Hovering and tool tips - D3.js Tutorial

From the course: D3.js Essential Training

Start my 1-month free trial Buy for my team

Challenge: Hovering and tool tips

“

(upbeat music) - [Instructor] It's our final challenge already. As you can guess, this one's going to concern interactivity. I've provided an exercise file containing a simple bar chart and in it I would like you to achieve two things. You should highlight the bars on hover and show a value tool tip. So a tool tip containing the value. You will need to use D3 to add the tool tip and you'll need to use the on mouseenter and on mouseleave events for this. For example, you could create a div that's set to be hidden and change its class or visibility in the JavaScript function. Or you could set it to have coordinates that are off the screen and bring them in. There's lots of other methods you can use and you can do anything that works. You can also choose how to highlight the bars. You could change their opacity or change their fill color, for example. On mouseleave of the bars, you should reset the fill color and hide the tool tip. As an optional exercise, you could use D3 transitions to…

Contents