1

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: enter image description here

Improve this question
2
  • Also, you could show the tooltip by default so the user learns to interact with it. I also like the idea of leaving the tooltip even after the user leaves the chart
    – Balaji Natarajan
    Sep 6, 2014 at 17:23
  • I noticed the tooltip displays data across multiple data lines. Consider putting in a vertical guide bar that moves with the pointer to better show the user that they're viewing multiple data points at specific time in the timeline.
    – nightning
    Sep 9, 2014 at 20:24

1 Answer 1

Reset to default
3

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.

Improve this answer
1
  • 1
    Since my tooltip contains no actionable content I'm going to attach the tooltip to the position of the mouse cursor. This way the user isn't able to hover over the tooltip. The idea of sticky tooltips looks great!
    – Pieter Meiresone
    Sep 9, 2014 at 7:58

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.