Interaction with a tooltip on a line chart

I am designing a line chart which displays a tooltip when the user hovers over the chart to show extra information. A working example of what I am currently using can be seen here.

I am interested in the patterns that should best be followed when interacting with the tooltip. Especially I am interested in following design choices:

• Should the user be able to hover with his mouse over the tooltip.


• The vertical position of the tooltip. Currently I use a fixed position in the top half of the chart.


• Should there be a mechanism to keep the tooltip visible after the user leaves the chart area with the mouse, for e.g. when the user still wants to see the data.

Any other interaction paradigms for this are also welcome.

A screenshot of the chart with tooltip:

Answer

Answers to most of your questions here will probably depend on what you are charting, who is using your chart, and how they use it (device).

However, the first question has a logical answer. The user should definitely be able to hover over the tooltip when the tooltip contains actionable content. For example, the user should be allowed to bring their mouse over the tooltip when it contains a link they can click.

Fixed positions for tooltips will also depend on your specific use-case. Most charting libraries attach their tooltips to where your cursor is. This is especially helpful when you are charting data with small differences between data points. Movement in the tooltip can help make those slight differences appear more obvious to users.

When it comes to keeping the tooltip visible after the user leaves the chart area, it will also depend on your chart. However, if a tooltip stays forever, isn't it more of a label at that point? If you want them to stay temporarily, you can consider sticky tooltips. Here is a demo of what those work like (and you can typically set a timeout on them).

http://www.zingchart.com/playground/run/540e3ad9a9fae

I'm on the ZingChart team so if you have any questions about how we made this demo, please feel free to reach out.