changed popup css to pass all mouse events. All pageX and pageY changed to clientX and clientY because the correction is done with getBoundingClientRect

dist/vis.css

@@ -825,6 +825,7 @@ div.vis-network-tooltip {
   border: 1px solid #808074;
 
   box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.2);
+  pointer-events: none;
 }
 div.vis-network-configuration {
     position:relative;

examples/network/events/interactionEvents.html

@@ -8,6 +8,7 @@
 
     <style type="text/css">
         #mynetwork {
+            margin-top:1000px;
             width: 600px;
             height: 400px;
             border: 1px solid lightgray;

lib/network/css/network-tooltip.css

@@ -15,4 +15,5 @@ div.vis-network-tooltip {
   border: 1px solid #808074;
 
   box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.2);
+  pointer-events: none;
 }

lib/network/modules/InteractionHandler.js

@@ -163,7 +163,7 @@ class InteractionHandler {
   }
 
   onContext(event) {
-    let pointer = this.getPointer({x:event.pageX, y:event.pageY});
+    let pointer = this.getPointer({x:event.clientX, y:event.clientY});
     this.selectionHandler._generateClickEvent('oncontext', event, pointer);
   }
 
@@ -448,7 +448,7 @@ class InteractionHandler {
       scale *= (1 + zoom);
 
       // calculate the pointer location
-      let pointer = this.getPointer({x:event.pageX, y:event.pageY});
+      let pointer = this.getPointer({x:event.clientX, y:event.clientY});
 
       // apply the new scale
       this.zoom(scale, pointer);
@@ -465,7 +465,7 @@ class InteractionHandler {
    * @private
    */
   onMouseMove(event) {
-    let pointer = this.getPointer({x:event.pageX, y:event.pageY});
+    let pointer = this.getPointer({x:event.clientX, y:event.clientY});
     let popupVisible = false;
 
     // check if the previously selected node is still selected

test/networkTest.html

@@ -20,11 +20,79 @@
     Create a simple network with some nodes and edges.
 </p>
 
-<div id="div_graph"></div>
+<div id="visualization"></div>
 
 <script type="text/javascript">
 
+    var nodes = new vis.DataSet([
+        {id: '1', label: 'Test1', step : 1},
+        {id: '2', label: 'Test2', step : 2},
+        {id: '3', label: 'Test3', step : 3}
+    ]);
+
+
+
+    var edges = new vis.DataSet([
+        {from: '1', to: '2', label: '1'},
+        {from: '3', to: '2'}
+    ]);
+
+
+    var currentStep = 1;
+    var maxStep = nodes.length;
+    var nodesView = new vis.DataView(nodes, {
+        filter: function(node)
+        {
+            if(node.hasOwnProperty('step'))
+                return node.step <= currentStep;
+            else
+                return false;
+        }
+    });
+
+
+
+
+    var options = {
+        width : '100%',
+        height : '100%',
+    };
+
+
+    console.log(nodesView, edges)
+    // create a network
+    var container = document.getElementById('visualization');
+    var data = {
+        nodes: nodesView,
+        edges: edges
+    };
+
+    var network = new vis.Network(container, data, options);
+//    nodesView.refresh();
+
+
+
+    function StepNext()
+    {
+        currentStep = currentStep + 1;
+        if(currentStep > maxStep)
+            currentStep = maxStep;
+        nodesView.refresh();
+    }
+
+    function StepBack()
+    {
+        currentStep = currentStep - 1;
+        if(currentStep < 1)
+            currentStep = 1;
+        nodesView.refresh();
+    }
+
 </script>
 
+
+<button id="btnPrevious" type="button" onclick="StepBack();"><<</button>
+<button id="btnNext" type="button" onclick="StepNext();">>></button>
+
 </body>
 </html>