Preparing the Tooltip

We are going to create the tooltip for the line chart. It is difficult to determine the prices for individual dates. The axes help, but they do not paint the full picture. Our readers may want to see the price of a stock sold on a specific date. Creating a tooltip for a line chart will come with some challenges. We will discuss those challenges as they arise.

Adding UI elements

There are a few things we are going to need. First, we need to add some UI elements that will change based on where the reader is hovering. We are going to need an element for the tooltip. We will also add a dot that will be positioned over the line to show the reader where they are on the line. Let’s add these elements.

We will start with the tooltip. In the HTML section, we are going to create the tooltip with plain HTML. Inside the #chart element, we will add the following: