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