Feature Suggestions for Tooltip Behavior and Usability

[KDH7751]

Hello Crystalize Team,

First of all, thank you for creating such a wonderful charting library. I am currently using another library (graphic), but I am very interested in migrating to Crystalize because your official documentation is excellent, and the project appears to be actively maintained.

However, there are a few features I need that don't seem to be supported yet, which is why I'm writing this post. Please note that English is not my first language, and I am using an AI translation tool to write this. I apologize in advance for any grammatical errors or unnatural phrasing.

Here are a few suggestions, mainly focusing on bar and line charts:

1. Trigger Tooltip Based on X-Axis Position
   Currently, a tooltip only appears when the cursor is placed directly over a chart element (like a specific bar or a point on a line). This means that if you hover over the empty space within the chart area corresponding to an X-value, nothing is displayed. While this behavior is logical for scatter plots, it can feel a bit unintuitive for bar and line charts. Users might think the tooltip isn't working when they click or hover in the general area of a data point.

It would be great to have an option to display the tooltip based on the cursor's X-axis position across the entire chart plot area.

2. Smoother Tooltip Rendering (Reduce Flickering)
   I've noticed that the tooltip tends to flicker significantly as it seems to re-render completely with every slight mouse movement. This happens even when the cursor stays over the same data point.

Ideally, combined with the first suggestion, the tooltip would persist smoothly as the cursor moves across the chart. Instead of being destroyed and recreated, it would just update its position and content, providing a much smoother user experience.

3. Smart Tooltip Positioning for Mobile
   This is more of a "nice-to-have" feature, but it would be a fantastic enhancement. Could the tooltip be positioned intelligently, rather than appearing at the exact click/touch point? For example, it could automatically appear in the direction with the most available space (e.g., above, below, left, right or diagonal of the cursor).

This is particularly crucial for mobile usability. When a user touches the screen, a tooltip appearing directly at the touch point is often obscured by their finger. In my current setup with the graphic library, I've managed to implement a similar solution using a custom tooltip and renderer.

Final Feedback on Mobile Experience
Lastly, I want to add a small piece of feedback. It's fantastic that Crystalize is designed to support both web and mobile environments. However, the default settings and behavior seem heavily optimized for web hover events. I couldn't find much documentation or clear examples for mobile-centric events like point or longPress.

This, combined with the strict trigger area for tooltips, might lead new users to mistakenly believe that tooltips are not working correctly on mobile. I initially had this impression myself. It would be incredibly helpful to either add more documentation/examples for mobile interactions or perhaps have the library's default behavior adapt based on whether it's running in a web or mobile environment.

Thank you for creating such a great library. I'm really looking forward to its continued development and hope my suggestions are helpful. Thank you for your time and consideration.

[rudi-q]

Hi 👋 @KDH7751,

Thanks a lot for using Cristalyse and for sharing your feature suggestions!

I completely agree with your feedback, and I’m planning to improve the tooltip behavior and overall usability.

I’ve opened a PR for this - #41.

It’s a bit of a bigger task, so it might take some time to get everything just right. If you (or anyone else following this thread) are interested in helping out, contributions are more than welcome! 🙌