Adding the tooltip
Onto our last step: adding interactions! The tooltip we'll build will be unlike any you've seen before - it will follow the mouse all the way around our chart, highlight the relevant data elements, and describe the weather for that hovered date.
Adding the tooltip#
Now for the fun part: adding interactions! Although our viewers can orient themselves to the different parts of our chart, we also want them to be able to dig in and view details about a particular day.
Let's add a tooltip that shows up when the user hovered anywhere over the chart. We'll want to start by adding a listener element that covers our whole chart and initializing our mouse move events.
Perfect, the black area covers exactly where we want any movement to trigger a tooltip.
Let's hide our listener by making its
Next, we'll need to create our tooltip element in our
index.html file, with a spot for each of our hovered over day's metrics to be displayed.
Let's also add our tooltip styles in our
styles.css file, remembering to hide our tooltip and to give our wrapper a
position to create a new context.
Switching back in our
chart.js file, we'll want to grab our
tooltip element to reference later, and also make a
<path> element to highlight the hovered over day.
Now we can fill out our
onMouseMove() function. Let's start by grabbing the
y position of our cursor, using
We have our mouse position, but we need to know the angle from the chart origin. How do we convert from an
[x, y] position to an angle? We'll need to use an inverse trigonometric function: atan2. If you're curious, read more about atan2 here.
Remember that these trigonometric functions originate around the horizontal, right plane of our circle. Let's rotate the resulting angle back one-quarter turn around the circle to match our date scale.
To keep our angles positive, we'll want to rotate any negative angles around our circle by one full turn, so they fit on our