O'Reilly logo

Learning jqPlot by Scott Gottreu

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Making the tooltip follow the mouse and adding cursor lines

This is a nice addition to our chart, but we know that Roshan specifically asked for the tooltip to appear near his cursor. We also take Calvin's advice about making things a bit more engaging and easier to use.

We can enable lines to span the length of the grid and intersect with the cursor. This will make it more obvious where the user's cursor is on the grid. We can also use tooltipLocation to move our tooltip around respective to the cursor. We return to the chart we just created and make a few changes. We set the following options within the cursor object:

  1. We start by changing tooltipLocation to se:
          cursor: {
            show: true,
            tooltipLocation:'se',
  2. Next, we add the followMouse option and ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required