Charts communicate ideas with simplicity, clarity, and detail.

Once you're comfortable with D3 you can quickly:

* understand key metrics at a glance
* catch anomalies (before they turn into problems)
* give key insights to your customers
* and impress your boss and co-workers

Today, I will show you the exact methods I use to create beautiful, understandable data visualizations using D3.

The Fullstack D3 masterclass is the complete guide to D3. With dozens of code examples showing each step, you will gain new insights into your data by creating visualizations in this self-paced online course.

Fullstack D3 Masterclass

---
title: "Adding the tooltip"
description: "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."
useMdx: true
privateVideoUrl: https://fullstack.wistia.com/medias/8bso03hy3j
codeFolder: course/module_06/lesson_06.09/protected/code/11-radar-weather-chart/end
---

# Adding the tooltip

<CodeSandboxEmbed
  src="//codesandbox.io/s/t41w5?fontsize=14&hidenavigation=1&theme=dark&autoresize=1&module=/chart.js"
  style={{width: '100%', height: '35em'}}
/>

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.

```javascript
const listenerCircle = bounds.append("circle")
   .attr("class", "listener-circle")
   .attr("r", dimensions.width / 2)
   .on("mousemove", onMouseMove)
   .on("mouseleave", onMouseLeave)

function onMouseMove(e) {
}

function onMouseLeave() {
}
```

Perfect, the black area covers exactly where we want any movement to trigger a tooltip.

![Chart with listener circle](https://d2uusema5elisf.cloudfront.net/courses/fullstack-d3-masterclass/module_06/lesson_06.09/public/images/11-radar-weather-chart/listener.png)

Let's hide our listener by making its `fill` `transparent`.

```css
.listener-circle {
  fill: transparent;
}
```

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.

```html
<div id="tooltip" class="tooltip">
   <div id="tooltip-date" class="tooltip-date"></div>
   <div id="tooltip-temperature" class="tooltip-temperature">
       <span id="tooltip-temperature-min"></span>
       -
       <span id="tooltip-temperature-max"></span>
   </div>
   <div class="tooltip-metric tooltip-uv">
       <div>UV Index</div>
       <div id="tooltip-uv"></div>
   </div>
   <div class="tooltip-metric tooltip-cloud">
       <div>Cloud Cover</div>
       <div id="tooltip-cloud"></div>
   </div>
   <div class="tooltip-metric tooltip-precipitation">
       <div>Precipitation Probability</div>
       <div id="tooltip-precipitation"></div>
   </div>
   <div class="tooltip-metric tooltip-precipitation-type">
       <div>Precipitation Type</div>
       <div id="tooltip-precipitation-type"></div>
   </div>
</div>
```

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.

```css
.wrapper {
    position: relative;
}

.tooltip {
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    width: 15em;
    padding: 0.6em 1em;
    background: #fff;
    text-align: center;
    line-height: 1.4em;
    font-size: 0.9em;
    border: 1px solid #ddd;
    z-index: 10;
    pointer-events: none;
}

.tooltip-date {
    margin-bottom: 0.2em;
    font-weight: 600;
    font-size: 1.1em;
    line-height: 1.4em;
}

.tooltip-temperature {
    font-feature-settings: 'tnum' 1;
}

.tooltip-metric {
    display: flex;
    justify-content: space-between;
    width: 100%;
    font-size: 0.8em;
    line-height: 1.3em;
    transition: all 0.1s ease-out;
}

.tooltip-metric div:first-child {
    font-weight: 800;
    padding-right: 1em;
}

.tooltip-metric div:nth-child(2) {
    font-feature-settings: 'tnum' 1;
}

.tooltip-cloud {
    color: #8395a7;
}
.tooltip-uv {
    color: #feca57;
}
```

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.

```javascript
const tooltip = d3.select("#tooltip")
const tooltipLine = bounds.append("path")
    .attr("class", "tooltip-line")
```

Now we can fill out our `onMouseMove()` function. Let's start by grabbing the `x` and `y` position of our cursor, using `d3.pointer()`.

```javascript
function onMouseMove(e) {
  const [x, y] = d3.pointer(e)
  // ...
```

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](https://en.wikipedia.org/wiki/Atan2).

```javascript { actualFilename=./protected/code/11-radar-weather-chart/completed/chart.js endChar=9073 endLine=295 startChar=9011 startLine=295 statedFilename=code/11-radar-weather-chart/completed/chart.js url=https&#x3A;//gitlab.com/fullstackio/books/newline-course-template/module_06/lesson_06.09/protected/code/11-radar-weather-chart/completed/chart.js#L295 }
const getAngleFromCoordinates = (x, y) => Math.atan2(y, x)
```

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.

```javascript
let angle = getAngleFromCoordinates(x, y) + Math.PI / 2
```

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 `angleScale`.

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.