fixes #1653

Author: iliakan

2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/2-hoverintent/solution.view/index.html

@@ -20,20 +20,17 @@
   <div id="tooltip" hidden>Tooltip</div>
 
   <script>
-    // for the demo
-    setTimeout(function() {
-      new HoverIntent({
-        elem,
-        over() {
-          tooltip.style.left = elem.getBoundingClientRect().left + 5 + 'px';
-          tooltip.style.top = elem.getBoundingClientRect().bottom + 5 + 'px';
-          tooltip.hidden = false;
-        },
-        out() {
-          tooltip.hidden = true;
-        }
-      });
-    }, 2000);
+    new HoverIntent({
+      elem,
+      over() {
+        tooltip.style.left = elem.getBoundingClientRect().left + 5 + 'px';
+        tooltip.style.top = elem.getBoundingClientRect().bottom + 5 + 'px';
+        tooltip.hidden = false;
+      },
+      out() {
+        tooltip.hidden = true;
+      }
+    });
   </script>
 
 </body>

2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/2-hoverintent/solution.view/test.js

@@ -49,18 +49,18 @@ describe("hoverIntent", function() {
     }
   })
 
-  it("mouseover -> immediately no tooltip", function() {
+  it("mouseover -> when the pointer just arrived, no tooltip", function() {
     mouse('mouseover', 10, 10);
     assert.isFalse(isOver);
   });
 
-  it("mouseover -> pause shows tooltip", function() {
+  it("mouseover -> after a delay, the tooltip shows up", function() {
     mouse('mouseover', 10, 10);
     this.clock.tick(100);
     assert.isTrue(isOver);
   });
 
-  it("mouseover -> fast mouseout no tooltip", function() {
+  it("mouseover -> followed by fast mouseout leads doesn't show tooltip", function() {
     mouse('mouseover', 10, 10);
     setTimeout(
       () => mouse('mouseout', 300, 300, { relatedTarget: document.body}),

2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/2-hoverintent/source.view/hoverIntent.js

@@ -45,6 +45,7 @@ class HoverIntent {
 
   destroy() {
     /* your code to "disable" the functionality, remove all handlers */
+    /* it's needed for the tests to work */
   }
 
 }

2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/2-hoverintent/source.view/index.html

@@ -20,20 +20,17 @@
   <div id="tooltip" hidden>Tooltip</div>
 
   <script>
-    // for the demo
-    setTimeout(function() {
-      new HoverIntent({
-        elem,
-        over() {
-          tooltip.style.left = elem.getBoundingClientRect().left + 5 + 'px';
-          tooltip.style.top = elem.getBoundingClientRect().bottom + 5 + 'px';
-          tooltip.hidden = false;
-        },
-        out() {
-          tooltip.hidden = true;
-        }
-      });
-    }, 2000);
+    new HoverIntent({
+      elem,
+      over() {
+        tooltip.style.left = elem.getBoundingClientRect().left + 5 + 'px';
+        tooltip.style.top = elem.getBoundingClientRect().bottom + 5 + 'px';
+        tooltip.hidden = false;
+      },
+      out() {
+        tooltip.hidden = true;
+      }
+    });
   </script>
 
 </body>

2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/2-hoverintent/source.view/test.js

@@ -3,35 +3,35 @@
 describe("hoverIntent", function() {
 
   function mouse(eventType, x, y, options) {
-    let eventOptions = Object.assign({ 
+    let eventOptions = Object.assign({
       bubbles: true,
       clientX: x,
       clientY: y,
       pageX: x,
       pageY: y,
       target: elem
     }, options || {});
-    
+
     elem.dispatchEvent(new MouseEvent(eventType, eventOptions));
   }
 
 
   let isOver;
   let hoverIntent;
-  
-  
+
+
   before(function() {
     this.clock = sinon.useFakeTimers();
   });
 
   after(function() {
     this.clock.restore();
   });
-  
-  
+
+
   beforeEach(function() {
     isOver = false;
-    
+
     hoverIntent = new HoverIntent({
       elem: elem,
       over: function() {
@@ -49,18 +49,18 @@ describe("hoverIntent", function() {
     }
   })
 
-  it("mouseover -> immediately no tooltip", function() {
+  it("mouseover -> when the pointer just arrived, no tooltip", function() {
     mouse('mouseover', 10, 10);
     assert.isFalse(isOver);
   });
-  
-  it("mouseover -> pause shows tooltip", function() {
+
+  it("mouseover -> after a delay, the tooltip shows up", function() {
     mouse('mouseover', 10, 10);
     this.clock.tick(100);
     assert.isTrue(isOver);
   });
 
-  it("mouseover -> fast mouseout no tooltip", function() {
+  it("mouseover -> followed by fast mouseout leads doesn't show tooltip", function() {
     mouse('mouseover', 10, 10);
     setTimeout(
       () => mouse('mouseout', 300, 300, { relatedTarget: document.body}),
@@ -94,5 +94,5 @@ describe("hoverIntent", function() {
     this.clock.tick(200);
     assert.isFalse(isOver);
   });
-  
+
 });