Tooltip showing is too aggressive

[Paul]

Short version:

In a line series chart I have tooltips. These show all the time when the mouse is nowhere near an actual point on the chart. Seems no matter where my mouse is on a like I will see the tooltip for the point that is closest to my mouse. I want to be required to actually hover over the real data point on the chart to get the tooltip, not the line itself.

 

Longer version:

Open to suggestions if there is a better way. In the attached photo, you can see a chart that shows my customer gains and losses for a given period. The period is filterable. The "Maximize" button in the upper right doubles the chart width, and uses JavaScript to recalculate the step if needed (i.e. if there are too many data points to see all at once) and redraws the chart. When the user hovers over a data metric, they see a customized tooltip that lets them investigate the data that created the chart. This is a new Kendo window that pops up and contains a Kendo grid. The grid contains the exact number of customers in the metric they clicked on.

The ultimate problem is that while trying to navigate my mouse to the "Customer List" link I end up getting a new tooltip before I get there. It's too tough to use. So I want to only show a tooltip when actually hovering over the data point circle. If there's a better way I would listen to suggestions.

[Konstantin Dikov]

Hello Paul,

I understand the issue that you are facing, but the problem is that this is the built-in way of showing the tooltips and there is no way for changing it. However, I have played around with the seriesHover event and I was able to display custom ToolTip only when the circle point is hovered. However, note that there is a CSS that hides the solid circles:

• http://dojo.telerik.com/UNoHUt/3

Have in mind that the content of the tooltip is set within the "content" function, so if you need to pass data from the seriesHover event, you need to store it in a global variable.

Hope this helps.


Regards,
Konstantin Dikov
Progress Telerik

[Paul]

Very cool, thank you! I have also been looking at this, and I was able to get this to work via the following. Using Q1 2018 of Kendo.all.js to work on this. I am thinking I will switch to your method.

Under my method, the first tooltip that shows is whatever you are closest to. An subsequent tooltip on the same series will only show if you are very close to it. I do not always have the circles displayed for the user to hover on. This is because a chart can currently have 70+ data points so the circle sizes are scaled down in many cases. They are there but would be very hard to hit exactly.

My changes are bolded.

Line 152832:
            aliasFor: function (e, coords) {

                // Added the undefined to this function call
                return this.parent.getNearestPoint(coords.x, coords.y, this.seriesIx, undefined);
            }

Line 152951:
            getNearestPoint: function (x, y, seriesIx, oldPoint) {
                var target = new Point(x, y);
                var allPoints = this.seriesPoints[seriesIx];

                // The point distance to search will be closest possible value, OR really close to override
                // whatever is showing now. Allows us to hit hints.
                var nearestPointDistance = (oldPoint ? 12 : MAX_VALUE);
                var nearestPoint = oldPoint;

                for (var i = 0; i < allPoints.length; i++) {
                    var point = allPoints[i];
                    if (point && defined(point.value) && point.value !== null && point.visible !== false) {
                        var pointBox = point.box;
                        var pointDistance = pointBox.center().distanceTo(target);
                        if (pointDistance < nearestPointDistance) {
                            nearestPoint = point;
                            nearestPointDistance = pointDistance;
                        }
                    }
                }
                return nearestPoint;
            }

Line 162282:
                if (point && !point.hover(this, e)) {
                    // If a tooltip is showing we will not switch to a new point here. This will still happen via other code,
                    // However we'll need to basically be right on top of it for that to take place.
                    if (typeof(this._tooltip._current) === "undefined") {
                       this._activePoint = point;
                       var tooltipOptions = deepExtend({}, tooltipOptions, point.options.tooltip);
                       if (tooltipOptions.visible) {
                           tooltip.show(point);
                       }
                       highlight.show(point);
                    } else {
                       point = undefined;
                    }
                    return point;
                }

Line 162316:
      var seriesPoint = point.parent.getNearestPoint(coords.x, coords.y, point.seriesIx, point);