Tooltip traversing with mouse pointer.

[SenSeo]

Hello,

In my graph, I am using tooltip to display the details. The problem is, during the tooltip visible I am scrolling the mouse, at that time tooltip is traversing with the mouse pointer throughout the page.
Below is my code to display the tooltip,

Code: Select all

                    var tip = new Tee.ToolTip(Chart1);
                    tip.render = "dom";
                    tip.autoHide = false;
                    tip.domStyle = "padding-left:8px; padding-right:8px; padding-top:0px; padding-bottom:4px; margin-left:5px; margin-top:0px; ";
                    tip.domStyle = tip.domStyle + "background-color:#FCFCFC; border-radius:4px 4px; color:#FFF; ";
                    tip.domStyle = tip.domStyle + "border-style:solid;border-color:#A3A3AF;border-width:3; z-index:1000;";
                    Chart1.tools.add(tip);
                    //tip.onhide = function () { scaling = 0; poindex = -1; }
                    tip.ongettext = function (tool, text, series, index) {
                        var toolTipValues = ["abc","xyz"];
                        
                        var s = '<font face="verdana" color="blue" size="1">' + toolTipValues[index] + '</font>';
                        return s;
                    }

Can you please assist me to fix the tooltip traversing issue?

Thanks in advance.

[Yeray]

Hello,

Is this what you mean?

2016-06-01_11-10-07.gif (296.93 KiB) Viewed 30163 times

[SenSeo]

Yes correct.

[SenSeo]

Not only for mouse pointer move... It is happening for scroll too.

[Yeray]

Hello,

I've added it to the public tracker:
http://bugs.teechart.net/show_bug.cgi?id=1552

I've also fixed it for the next maintenance release.
Here the patch:

Code: Select all

---
 teechart.js | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

diff --git a/teechart.js b/teechart.js
index 018c879..65d542a 100644
--- a/teechart.js
+++ b/teechart.js
@@ -5886,7 +5886,13 @@ Tee.Chart=function(canvas,data,type)
 
     var c=this.chart;
 
-    if (!c.zoom.wheel.enabled) return;
+    if (!c.zoom.wheel.enabled) {
+      for(var t=0, s; s=c.tools.items[t++];)
+        if ((s instanceof Tee.ToolTip) && (s.active))
+          s.hide();
+
+      return;
+    }
 
     event=event || window.event;
 
@@ -5908,6 +5914,10 @@ Tee.Chart=function(canvas,data,type)
         if (event.preventDefault)
            event.preventDefault();
       }
+
+      for(var t=0, s; s=c.tools.items[t++];)
+        if ((s instanceof Tee.ToolTip) && (s.active))
+          s.mousemove(p);
     }
   }
 
-- 

[SenSeo]

Great to hear that you have fixed this issue.

We are in the final stage of the development and we are yet to release the teechart graphs to our production as sooner. So, please share the Teechart.js library with the fix to us. It would be very helpful to us to fix this tooltip issue.

Thanks in advance!

[Yeray]

Hello,

The patch in my last post should be enough to apply the fix in your version of the teechart.js (removing the lines starting with a "-" sign, and adding the lines starting with a "+" sign).
I'll send you a mail with the complete teechart.js anyway.

[SenSeo]

Thanks!

I already tried to apply the patch fix to my teechart version. Unfortunately I was unsuccessful.

[SenSeo]

Hello,

We received the mail from you. But, it seems the attachment has been removed. Can you please share the "Teechart.js"CDN link to us?

Thanks!

[Yeray]

Hello,

We received the mail from you. But, it seems the attachment has been removed. Can you please share the "Teechart.js"CDN link to us?

I've just sent you a new mail.

[SenSeo]

Hello,

Still we are facing the tooltip traversing issue in some scenarios. If the series data values contains N no. of records, traversing issue is happening. This is not happening for the minimum amount of data's. Any insights?

[Yeray]

Hello,

I'm not able to reproduce the problem. Could you please arrange a simple example project/video we can run as-is to reproduce the problem here?

[SenSeo]

Below is my sample code which is having huge amount of data's.

Code: Select all

<!DOCTYPE html>
<html>
<head>
    <title>TeeChart JavaScript Tooltips Example</title>

    <link type="text/css" href="../../jquery/css/ui-lightness/jquery-ui-1.8.17.custom.css" rel="Stylesheet" />
    <script type="text/javascript" src="../../jquery/js/jquery-1.7.1.min.js"></script>
    <script type="text/javascript" src="../../jquery/js/jquery-ui-1.8.17.custom.min.js"></script>

    <!--[if lt IE 9]>
        <script src="../../src/excanvas/excanvas_text.js"></script>
        <script src="../../src/excanvas/canvas.text.js"></script>
    <![endif]-->

    <script src="Scripts/TeeChart/teechart.js"></script>
    <script src="Scripts/TeeChart/teechart-extras.js"></script>
    <script src="Scripts/TeeChart/teechart-animations.js"></script>
    <script src="Scripts/TeeChart/date.format.js"></script>
    <script type="text/javascript">
var Chart1, tip, scaling=0, poindex=-1;
function draw() {
    Chart1 = new Tee.Chart("canvas");
    var pointXY=new Tee.PointXY([355, 350, 346, 339, 332, 327, 320, 314, 305, 299, 291, 284, 278, 275, 269, 264, 262, 259, 257, 258,
      258, 259, 261, 263, 265, 266, 270, 271, 273, 276, 279, 268, 267, 268, 267, 266, 265, 262, 256, 252, 244, 238, 229, 220, 210, 200,
      191, 182, 172, 163, 154, 143, 135, 127, 120, 114, 108, 104, 101, 97, 96, 94, 95, 95, 96, 98, 101, 105, 110, 115, 122, 128, 137, 145,
      153, 163, 172, 183, 194, 206, 217, 228, 239, 250, 259, 270, 279, 289, 296, 304, 311, 316, 322, 325, 328, 331, 333, 332, 330, 329, 355,
      350, 346, 339, 332, 327, 320, 314, 305, 299, 291, 284, 278, 275, 269, 264, 262, 259, 257, 258, 258, 259, 261, 263, 265, 266, 270, 271, 273,
      276, 279, 268, 267, 268, 267, 266, 265, 262, 256, 252, 244, 238, 229, 220, 210, 200, 191, 182, 172, 163, 154, 143, 135, 127, 120, 114, 108,
      104, 101, 97, 96, 94, 95, 95, 96, 98, 101, 105, 110, 115, 122, 128, 137, 145, 153, 163, 172, 183, 194, 206, 217, 228, 239, 250, 259, 270,
      279, 289, 296, 304, 311, 316, 322, 325, 328, 331, 333, 332, 330, 329, 355, 350, 346, 339, 332, 327, 320, 314, 305, 299, 291, 284, 278, 275,
      269, 264, 262, 259, 257, 258, 258, 259, 261, 263, 265, 266, 270, 271, 273, 276, 279, 268, 267, 268, 267, 266, 265, 262, 256, 252, 244, 238,
      229, 220, 210, 200, 191, 182, 172, 163, 154, 143, 135, 127, 120, 114, 108, 104, 101, 97, 96, 94, 95, 95, 96, 98, 101, 105, 110, 115, 122, 128,
      137, 145, 153, 163, 172, 183, 194, 206, 217, 228, 239, 250, 259, 270, 279, 289, 296, 304, 311, 316, 322, 325, 328, 331, 333, 332, 330, 329, 355,
      350, 346, 339, 332, 327, 320, 314, 305, 299, 291, 284, 278, 275, 269, 264, 262, 259, 257, 258, 258, 259, 261, 263, 265, 266, 270, 271, 273, 276,
      279, 268, 267, 268, 267, 266, 265, 262, 256, 252, 244, 238, 229, 220, 210, 200, 191, 182, 172, 163, 154, 143, 135, 127, 120, 114, 108, 104, 101,
      97, 96, 94, 95, 95, 96, 98, 101, 105, 110, 115, 122, 128, 137, 145, 153, 163, 172, 183, 194, 206, 217, 228, 239, 250, 259, 270, 279, 289, 296, 304,
      311, 316, 322, 325, 328, 331, 333, 332, 330, 329, 355, 350, 346, 339, 332, 327, 320, 314, 305, 299, 291, 284, 278, 275, 269, 264, 262, 259, 257, 258,
      258, 259, 261, 263, 265, 266, 270, 271, 273, 276, 279, 268, 267, 268, 267, 266, 265, 262, 256, 252, 244, 238, 229, 220, 210, 200, 191, 182, 172, 163,
      154, 143, 135, 127, 120, 114, 108, 104, 101, 97, 96, 94, 95, 95, 96, 98, 101, 105, 110, 115, 122, 128, 137, 145, 153, 163, 172, 183, 194, 206, 217, 228,
      239, 250, 259, 270, 279, 289, 296, 304, 311, 316, 322, 325, 328, 331, 333, 332, 330, 329, 355, 350, 346, 339, 332, 327, 320, 314, 305, 299, 291, 284, 278,
      275, 269, 264, 262, 259, 257, 258, 258, 259, 261, 263, 265, 266, 270, 271, 273, 276, 279, 268, 267, 268, 267, 266, 265, 262, 256, 252, 244, 238, 229, 220,
      210, 200, 191, 182, 172, 163, 154, 143, 135, 127, 120, 114, 108, 104, 101, 97, 96, 94, 95, 95, 96, 98, 101, 105, 110, 115, 122, 128, 137, 145, 153, 163,
      172, 183, 194, 206, 217, 228, 239, 250, 259, 270, 279, 289, 296, 304, 311, 316, 322, 325, 328, 331, 333, 332, 330, 329, 355, 350, 346, 339, 332, 327, 320,
      314, 305, 299, 291, 284, 278, 275, 269, 264, 262, 259, 257, 258, 258, 259, 261, 263, 265, 266, 270, 271, 273, 276, 279, 268, 267, 268, 267, 266, 265, 262,
      256, 252, 244, 238, 229, 220, 210, 200, 191, 182, 172, 163, 154, 143, 135, 127, 120, 114, 108, 104, 101, 97, 96, 94, 95, 95, 96, 98, 101, 105, 110, 115,
      122, 128, 137, 145, 153, 163, 172, 183, 194, 206, 217, 228, 239, 250, 259, 270, 279, 289, 296, 304, 311, 316, 322, 325, 328, 331, 333, 332, 330, 329, 355,
      350, 346, 339, 332, 327, 320, 314, 305, 299, 291, 284, 278, 275, 269, 264, 262, 259, 257, 258, 258, 259, 261, 263, 265, 266, 270, 271, 273, 276, 279, 268,
      267, 268, 267, 266, 265, 262, 256, 252, 244, 238, 229, 220, 210, 200, 191, 182, 172, 163, 154, 143, 135, 127, 120, 114, 108, 104, 101, 97, 96, 94, 95, 95,
      96, 98, 101, 105, 110, 115, 122, 128, 137, 145, 153, 163, 172, 183, 194, 206, 217, 228, 239, 250, 259, 270, 279, 289, 296, 304, 311, 316, 322, 325, 328,
      331, 333, 332, 330, 329, 355, 350, 346, 339, 332, 327, 320, 314, 305, 299, 291, 284, 278, 275, 269, 264, 262, 259, 257, 258, 258, 259, 261, 263, 265, 266,
      270, 271, 273, 276, 279, 268, 267, 268, 267, 266, 265, 262, 256, 252, 244, 238, 229, 220, 210, 200, 191, 182, 172, 163, 154, 143, 135, 127, 120, 114, 108,
      104, 101, 97, 96, 94, 95, 95, 96, 98, 101, 105, 110, 115, 122, 128, 137, 145, 153, 163, 172, 183, 194, 206, 217, 228, 239, 250, 259, 270, 279, 289, 296,
      304, 311, 316, 322, 325, 328, 331, 333, 332, 330, 329, 355, 350, 346, 339, 332, 327, 320, 314, 305, 299, 291, 284, 278, 275, 269, 264, 262, 259, 257, 258,
      258, 259, 261, 263, 265, 266, 270, 271, 273, 276, 279, 268, 267, 268, 267, 266, 265, 262, 256, 252, 244, 238, 229, 220, 210, 200, 191, 182, 172, 163, 154,
      143, 135, 127, 120, 114, 108, 104, 101, 97, 96, 94, 95, 95, 96, 98, 101, 105, 110, 115, 122, 128, 137, 145, 153, 163, 172, 183, 194, 206, 217, 228, 239,
      250, 259, 270, 279, 289, 296, 304, 311, 316, 322, 325, 328, 331, 333, 332, 330, 329, 355, 350, 346, 339, 332, 327, 320, 314, 305, 299, 291, 284, 278, 275,
      269, 264, 262, 259, 257, 258, 258, 259, 261, 263, 265, 266, 270, 271, 273, 276, 279, 268, 267, 268, 267, 266, 265, 262, 256, 252, 244, 238, 229, 220, 210,
      200, 191, 182, 172, 163, 154, 143, 135, 127, 120, 114, 108, 104, 101, 97, 96, 94, 95, 95, 96, 98, 101, 105, 110, 115, 122, 128, 137, 145, 153, 163, 172,
      183, 194, 206, 217, 228, 239, 250, 259, 270, 279, 289, 296, 304, 311, 316, 322, 325, 328, 331, 333, 332, 330, 329, 355, 350, 346, 339, 332, 327, 320, 314,
      305, 299, 291, 284, 278, 275, 269, 264, 262, 259, 257, 258, 258, 259, 261, 263, 265, 266, 270, 271, 273, 276, 279, 268, 267, 268, 267, 266, 265, 262, 256,
      252, 244, 238, 229, 220, 210, 200, 191, 182, 172, 163, 154, 143, 135, 127, 120, 114, 108, 104, 101, 97, 96, 94, 95, 95, 96, 98, 101, 105, 110, 115, 122,
      128, 137, 145, 153, 163, 172, 183, 194, 206, 217, 228, 239, 250, 259, 270, 279, 289, 296, 304, 311, 316, 322, 325, 328, 331, 333, 332, 330, 329, 355, 350,
      346, 339, 332, 327, 320, 314, 305, 299, 291, 284, 278, 275, 269, 264, 262, 259, 257, 258, 258, 259, 261, 263, 265, 266, 270, 271, 273, 276, 279, 268, 267,
      268, 267, 266, 265, 262, 256, 252, 244, 238, 229, 220, 210, 200, 191, 182, 172, 163, 154, 143, 135, 127, 120, 114, 108, 104, 101, 97, 96, 94, 95, 95, 96,
      98, 101, 105, 110, 115, 122, 128, 137, 145, 153, 163, 172, 183, 194, 206, 217, 228, 239, 250, 259, 270, 279, 289, 296, 304, 311, 316, 322, 325, 328, 331,
      333, 332, 330, 329, 355, 350, 346, 339, 332, 327, 320, 314, 305, 299, 291, 284, 278, 275, 269, 264, 262, 259, 257, 258, 258, 259, 261, 263, 265, 266, 270,
      271, 273, 276, 279, 268, 267, 268, 267, 266, 265, 262, 256, 252, 244, 238, 229, 220, 210, 200, 191, 182, 172, 163, 154, 143, 135, 127, 120, 114, 108, 104,
      101, 97, 96, 94, 95, 95, 96, 98, 101, 105, 110, 115, 122, 128, 137, 145, 153, 163, 172, 183, 194, 206, 217, 228, 239, 250, 259, 270, 279, 289, 296, 304,
      311, 316, 322, 325, 328, 331, 333, 332, 330, 329, 355, 350, 346, 339, 332, 327, 320, 314, 305, 299, 291, 284, 278, 275, 269, 264, 262, 259, 257, 258, 258,
      259, 261, 263, 265, 266, 270, 271, 273, 276, 279, 268, 267, 268, 267, 266, 265, 262, 256, 252, 244, 238, 229, 220, 210, 200, 191, 182, 172, 163, 154, 143,
      135, 127, 120, 114, 108, 104, 101, 97, 96, 94, 95, 95, 96, 98, 101, 105, 110, 115, 122, 128, 137, 145, 153, 163, 172, 183, 194, 206, 217, 228, 239, 250,
      259, 270, 279, 289, 296, 304, 311, 316, 322, 325, 328, 331, 333, 332, 330, 329, 355, 350, 346, 339, 332, 327, 320, 314, 305, 299, 291, 284, 278, 275, 269,
      264, 262, 259, 257, 258, 258, 259, 261, 263, 265, 266, 270, 271, 273, 276, 279, 268, 267, 268, 267, 266, 265, 262, 256, 252, 244, 238, 229, 220, 210, 200,
      191, 182, 172, 163, 154, 143, 135, 127, 120, 114, 108, 104, 101, 97, 96, 94, 95, 95, 96, 98, 101, 105, 110, 115, 122, 128, 137, 145, 153, 163, 172, 183,
      194, 206, 217, 228, 239, 250, 259, 270, 279, 289, 296, 304, 311, 316, 322, 325, 328, 331, 333, 332, 330, 329, 355, 350, 346, 339, 332, 327, 320, 314, 305,
      299, 291, 284, 278, 275, 269, 264, 262, 259, 257, 258, 258, 259, 261, 263, 265, 266, 270, 271, 273, 276, 279, 268, 267, 268, 267, 266, 265, 262, 256, 252,
      244, 238, 229, 220, 210, 200, 191, 182, 172, 163, 154, 143, 135, 127, 120, 114, 108, 104, 101, 97, 96, 94, 95, 95, 96, 98, 101, 105, 110, 115, 122, 128,
      137, 145, 153, 163, 172, 183, 194, 206, 217, 228, 239, 250, 259, 270, 279, 289]);

    pointXY.format.stroke.size = 4;
    pointXY.pointer.style = "ellipse";
    pointXY.pointer.width = 5;
    pointXY.pointer.height = 5;

    Chart1.addSeries(pointXY);
    Chart1.axes.left.setMinMax(80, 360);
  Chart1.axes.left.format.stroke.fill = "green";
  Chart1.axes.left.title.text="Left Axis";
  Chart1.axes.bottom.title.text="Bottom Axis";
  Chart1.title.text="Mouse-over Tooltips";
  Chart1.title.format.font.style="18px Verdana";
  Chart1.series.items[0].format.stroke.fill="darkorange";
  Chart1.series.items[0].pointer.visible=true;
  Chart1.panel.format.stroke.fill="";
  Chart1.panel.format.shadow.visible=true;
  tip=new Tee.ToolTip(Chart1);
  tip.render = "dom";
  tip.domStyle = "padding-left:8px; padding-right:8px; padding-top:0px; padding-bottom:4px; margin-left:5px; margin-top:0px;";
  tip.domStyle = tip.domStyle + "background-color:#FCFCFC; border-radius:4px 4px; color:#FFF; ";
  tip.domStyle = tip.domStyle + "border-style:solid;border-color:#A3A3AF;border-width:3; z-index:1000;";
  Chart1.tools.add(tip);
  tip.ongettext = function (tool, text) { return '<font face="verdana" color="blue" size="1">' + "Text:\n" + text + '</font>'; }
  Chart1.legend.visible = false;
  Chart1.draw();
}

    </script>
</head>
<body onload="draw()">
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />

    <canvas id="canvas" width="1200" height="800">
        This browser does not seem to support HTML5 Canvas.
    </canvas>
</body>
</html>

In some scenarios the traversing issue is happening.

[Yeray]

Hello,

As an extra check, you can use the body's mousemove event and hide the ToolTip if the mouse is out of the chart canvas:

Code: Select all

            var canvas = document.getElementById('canvas');
            var body = document.body;
            body.addEventListener('mousemove', function(evt) {
                var rect = canvas.getBoundingClientRect();

                if ((evt.clientX < rect.left) || (evt.clientX > rect.right) || (evt.clientY < rect.top) || (evt.clientY > rect.bottom)) {
                    tip.hide();
                }

            }, false);

[SenSeo]

This solution is not working for me. I am having more than 4 pages and each page contains the tee chart graph with tooltip display. If I go with the body's mousemove event, it is working only for one page. For the remaining pages tooltip is not displaying. Is there any other solution available to fix this issue?