Steema Central

Steema Software - Customer Support Forums
https://www.steema.com/support/

Tooltip traversing with mouse pointer.

https://www.steema.com/support/viewtopic.php?f=18&t=16128

Page 1 of 2

Tooltip traversing with mouse pointer.

Posted: Tue May 31, 2016 12:20 pm
by 15677821
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.

Re: Tooltip traversing with mouse pointer.

Posted: Wed Jun 01, 2016 9:12 am
by yeray
Hello,

Is this what you mean?
2016-06-01_11-10-07.gif
2016-06-01_11-10-07.gif (296.93 KiB) Viewed 25644 times

Re: Tooltip traversing with mouse pointer.

Posted: Wed Jun 01, 2016 10:13 am
by 15677821
Yes correct.

Re: Tooltip traversing with mouse pointer.

Posted: Wed Jun 01, 2016 10:17 am
by 15677821
Not only for mouse pointer move... It is happening for scroll too.

Re: Tooltip traversing with mouse pointer.

Posted: Wed Jun 01, 2016 1:23 pm
by 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);
     }
   }
 
--

Re: Tooltip traversing with mouse pointer.

Posted: Thu Jun 02, 2016 6:18 am
by 15677821
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!

Re: Tooltip traversing with mouse pointer.

Posted: Thu Jun 02, 2016 7:50 am
by 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.

Re: Tooltip traversing with mouse pointer.

Posted: Thu Jun 02, 2016 1:14 pm
by 15677821
Thanks!

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

Re: Tooltip traversing with mouse pointer.

Posted: Thu Jun 02, 2016 2:00 pm
by 15677821
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!

Re: Tooltip traversing with mouse pointer.

Posted: Thu Jun 02, 2016 2:25 pm
by yeray
Hello,
SenSeo wrote: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.

Re: Tooltip traversing with mouse pointer.

Posted: Tue Jun 07, 2016 8:32 am
by 15677821
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?

Re: Tooltip traversing with mouse pointer.

Posted: Tue Jun 07, 2016 12:04 pm
by 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?

Re: Tooltip traversing with mouse pointer.

Posted: Wed Jun 08, 2016 8:30 am
by 15677821
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.

Re: Tooltip traversing with mouse pointer.

Posted: Thu Jun 09, 2016 11:12 am
by 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);

Re: Tooltip traversing with mouse pointer.

Posted: Wed Jun 22, 2016 5:20 am
by 15677821
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?
All times are UTC
Page 1 of 2
Powered by phpBB® Forum Software © phpBB Limited
https://www.phpbb.com/