Get Tipping

So, bolstered with a couple of new concepts to consider, let’s see how they are enacted in practice.

If we start with our simple-scatter plot graph, there are four areas in it that we will want to modify.

CSS

The first area is the CSS. The following code should be added just before the </style> tag:

div.tooltip {
  position: absolute;
  text-align: center;
  width: 60px;
  height: 28px;
  padding: 2px;
  font: 12px sans-serif;
  background: lightsteelblue;
  border: 0px;
  border-radius: 8px;
  pointer-events: none;
}

• These styles are defining how our tooltip will appear. Most of them are fairly straight forward. The position of the tooltip is done in absolute measurements and not relative. The text is center-aligned, and the height, width, and color of the rectangle is 28px, 60px, and lightsteelblue, respectively. The “padding” is an interesting feature that provides a neat way to grow a shape by a fixed amount from a specified size.

• We set the border to 0px so that it doesn’t show up, and a neat style (attribute?) called border-radius provides the nice rounded corners on the rectangle.

• Lastly, but by no means least, the pointer-events: none line is in place to instruct the mouse event to go “through” the element and target whatever is “underneath” that element instead. That means that even if the tooltip partly obscures the circle, the code will still act as if the mouse is only over the circle.

JS

The second addition is a simple one-liner that should (for form’s sake) be placed under the parseTime variable declaration:

var formatTime = d3.timeFormat("%e %B");

This line formats the date when it appears in our tooltip. Without it, the time would default to a disturbingly long combination of temporal details. In the case here, we have declared that we want to see the day of the month (%e) and the full month name(%B).

The third block of code is the function declaration for “div.”

var div = d3.select("body").append("div")
    .attr("class", "tooltip")
    .style("opacity", 0);

We can place that just after the valueline definition in the JavaScript. Again, there’s not too much here that’s surprising. We tell it to attach a div element to the body element, we set the class to the tooltip class (from the CSS), and we set the opacity to zero. It might sound strange to have the opacity set to zero. But remember, that’s the natural state of a tooltip. It will live unseen until it’s moment of revelation arrives and it pops up!

The final block of code is slightly more complex. It could be described as a mutant version of the neat little bit of code that we used to do the drawing of the dots for the scatter plot. That’s because the tooltips are all about the scatter plot circles. Without a circle to “mouseover,” the tooltip never appears.‘mouseover’, the tooltip never appears.

So here’s the code that includes the scatter plot drawing (it’s included since it’s pretty much integral):