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