DOM ToolTip on recreate chart

samos · Post by **samos** » Wed Aug 12, 2015 10:48 am

Hi,

I have a problem with DOM ToolTip.

In my project I create a chart in my html document.
I can need to remove this chart and create new one.
When I do that the tooltip is not display any more. (to be more correct the left and top of the toolTip DIV are not changed and are out of the display).
I think the problem is that the Tee.DOMTip function. It is created only once for the html and the object tt is not recreated.
Something with this object not working well when I replace the chart in my html.

To work around the problem I modify the teechat.js and some code in my JavaScript.

In Tee.DOMTip I added the code:

Code: Select all

  show: function (v, w, dest, domStyle)
     {

/////////////// start of added code        //////////////////// 
var tt1 = document.getElementById('teetip1');
         if (!tt1 )
             {
             if (tt)
                 clearInterval(tt.timer);
             tt = null;
             }
// ///////////end of added code//////////////////////

    if (!tt){
      tt = document.createElement('div');
      tt.setAttribute('id','teetip1');
….

In my code before creating the chart I added the code:

Code: Select all

            var tt = document.getElementById('teetip1');
            if (tt != null)
                if (tt.parentNode != null)
                tt.parentNode.removeChild(tt);

I'm not sure this is the best way to do it, maybe there is another way, or better to check why the x,y positions are not updated correctly after I remove a chart and create new one.

Thanks
Amos

Post by **Yeray** » Mon Aug 17, 2015 2:20 pm

Hello Amos,

Excuse us for the delayed reply here.
It would be helpful if you could arrange a simple .htm we can run as-is to reproduce the problem here so we can see what are you exactly doing.

samos · Post by **samos** » Tue Aug 18, 2015 6:20 am

Hi,
To recreate my problem it is hard because I also dynamically load html into divs.
However, I made small modification to the DOM Tooltip example and this can show another problem, but it is probably the same problem.
I created in this example 2 charts. When you open the page and when the charts are one beside the other (not one over the other) you see the that second charts hint are not in the correct position.

Code: Select all

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

<!-- Example, use an optional <style> .teetip {...} to customize tooltip: -->
<style type="text/css">
.teetip { margin-left:15px !important; background:yellow !important; color:navy !important; font-family:Tahoma !important; }
</style>

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

<script src="../../src/teechart.js" type="text/javascript"></script>

<script type="text/javascript">

var Chart1, Chart2, tip1, tip2, series1, series2;

function draw() {
  Chart1=new Tee.Chart("canvas1");
  Chart2=new Tee.Chart("canvas2");

  series1=new Tee.PointXY([5,3,2,7,1,6,4,5,1,0,10]);
  series2=new Tee.PointXY([5,3,2,7,1,6,4,5,1,0,10]);

  series1.pointer.format.stroke.fill="darkred";
  series1.cursor="pointer";
  series2.pointer.format.stroke.fill="darkred";
  series2.cursor="pointer";

  Chart1.addSeries(series1);
  Chart2.addSeries(series2);

  Chart1.title.text="DOM Tooltips";
  Chart1.footer.text="Move the mouse over series points";
  Chart2.title.text="DOM Tooltips";
  Chart2.footer.text="Move the mouse over series points";


  tip1=new Tee.ToolTip(Chart1);
  Chart1.tools.add(tip1);
  
  tip2=new Tee.ToolTip(Chart2);
  Chart2.tools.add(tip2);
  
  tip1.ongettext=function(tool, text, series, index) {
       return 'Series1 point: <strong>'+ index.toFixed(0) +'</strong><br/>Value: '+series.data.values[index].toFixed(2);
  }
  tip2.ongettext=function(tool, text, series, index) {
       return 'Series2 point: <strong>'+ index.toFixed(0) +'</strong><br/>Value: '+series.data.values[index].toFixed(2);
  }

  Chart1.draw();
  Chart2.draw();
}



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


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

Post by **Yeray** » Tue Aug 18, 2015 3:18 pm

Hello Amos,

Your example seems to work fine with two little modifications at Tee.DOMTip:
- Always reset target at show, not only when tt doesn't exist:

Code: Select all

  show: function(v,w, dest, domStyle){
    if (!tt){
      tt = document.createElement('div');
      tt.setAttribute('id','teetip1');

      //target=dest;  //REMOVE THIS

      tt.className='teetip';
	  
      tt.setAttribute("style", domStyle);

      document.body.appendChild(tt);

      ttstyle=tt.style;
      ttstyle.opacity = 0;

      // IE only:
      if (ie)
         ttstyle.filter = 'alpha(opacity=0)';
    }
    
    target=dest;  //ADD THIS
//...

- Change target.clientLeft for target.offsetLeft at pos.

Code: Select all

pos: function(e){
//...
      if (target) {
        if (l>(target.offsetLeft+target.clientWidth-tt.offsetWidth - 25))
            l = target.offsetLeft+target.clientWidth-tt.offsetWidth - 25;
      }

I'll apply the modifications to the production sources as soon as you can confirm they fix the problem for you.

samos · Post by **samos** » Wed Aug 19, 2015 6:51 am

Hi,
This is working for me. It solved my original problem.
Thanks,
Amos

Post by **Yeray** » Wed Aug 19, 2015 7:41 am

Hello Amos,

Thanks for confirming it.

DOM ToolTip on recreate chart

DOM ToolTip on recreate chart

Re: DOM ToolTip on recreate chart

Re: DOM ToolTip on recreate chart

Re: DOM ToolTip on recreate chart

Re: DOM ToolTip on recreate chart

Re: DOM ToolTip on recreate chart

	Yeray Alonso Development & Support Steema Software Av. Montilivi 33, 17003 Girona, Catalonia (SP)
	Please read our Bug Fixing Policy