Use mouseenter when fixed, fix IE 10

minhtranite · Feb 16, 2016 · 47e0176 · 47e0176
1 parent a654d67
commit 47e0176
Show file tree

Hide file tree

Showing 6 changed files with 20 additions and 20 deletions.
diff --git a/bower.json b/bower.json
@@ -1,6 +1,6 @@
 {
   "name": "react-tooltip-component",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "description": "React component.",
   "main": ["dist/react-tooltip-component.js", "dist/tooltip"],
   "keywords": [

diff --git a/dist/react-tooltip-component.js b/dist/react-tooltip-component.js
diff --git a/example/webpack.dev.server.js b/example/webpack.dev.server.js
@@ -67,7 +67,7 @@ app.get('*', function (req, res) {
 
 var server = http.createServer(app);
 
-server.listen(port, host, function () {
+server.listen(port, function () {
   console.log('Listening at ' + serverUrl);
   opn(serverUrl);
 });
diff --git a/lib/Tooltip.js b/lib/Tooltip.js
@@ -50,8 +50,8 @@ var Tooltip = (function (_React$Component) {
       _this.container.appendChild(_this.tooltipEl);
       _this.resetTooltip();
 
-      _this.componentEl.addEventListener('mousemove', _this.handleMouseMove);
-      _this.componentEl.addEventListener('mouseout', _this.handleMouseOut);
+      _this.componentEl.addEventListener(_this.props.fixed ? 'mouseenter' : 'mousemove', _this.handleMouseMove);
+      _this.componentEl.addEventListener('mouseleave', _this.handleMouseOut);
     };
 
     this.componentDidUpdate = function () {
@@ -60,8 +60,8 @@ var Tooltip = (function (_React$Component) {
     };
 
     this.componentWillUnmount = function () {
-      _this.componentEl.removeEventListener('mousemove', _this.handleMouseMove);
-      _this.componentEl.removeEventListener('mouseout', _this.handleMouseOut);
+      _this.componentEl.removeEventListener(_this.props.fixed ? 'mouseenter' : 'mousemove', _this.handleMouseMove);
+      _this.componentEl.removeEventListener('mouseleave', _this.handleMouseOut);
       _this.container.removeChild(_this.tooltipEl);
     };
 
@@ -122,13 +122,13 @@ var Tooltip = (function (_React$Component) {
             cOffsetY = componentHeight / 2;
             break;
         }
-        pointX = componentOffsetX + cOffsetX + window.scrollX;
-        pointY = componentOffsetY + cOffsetY + window.scrollY;
+        pointX = componentOffsetX + cOffsetX + (window.scrollX || window.pageXOffset);
+        pointY = componentOffsetY + cOffsetY + (window.scrollY || window.pageYOffset);
       } else {
         var clientX = e.clientX;
         var clientY = e.clientY;
-        pointX = clientX - containerOffsetX + window.scrollX;
-        pointY = clientY - containerOffsetY + window.scrollY;
+        pointX = clientX - containerOffsetX + (window.scrollX || window.pageXOffset);
+        pointY = clientY - containerOffsetY + (window.scrollY || window.pageYOffset);
       }
       return {
         x: pointX,

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-tooltip-component",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "description": "React tooltip component.",
   "main": "lib/index.js",
   "scripts": {

diff --git a/src/Tooltip.js b/src/Tooltip.js
@@ -36,8 +36,8 @@ class Tooltip extends React.Component {
     this.container.appendChild(this.tooltipEl);
     this.resetTooltip();
 
-    this.componentEl.addEventListener('mousemove', this.handleMouseMove);
-    this.componentEl.addEventListener('mouseout', this.handleMouseOut);
+    this.componentEl.addEventListener(this.props.fixed ? 'mouseenter' : 'mousemove', this.handleMouseMove);
+    this.componentEl.addEventListener('mouseleave', this.handleMouseOut);
   };
 
   componentDidUpdate = () => {
@@ -47,8 +47,8 @@ class Tooltip extends React.Component {
 
 
   componentWillUnmount = () => {
-    this.componentEl.removeEventListener('mousemove', this.handleMouseMove);
-    this.componentEl.removeEventListener('mouseout', this.handleMouseOut);
+    this.componentEl.removeEventListener(this.props.fixed ? 'mouseenter' : 'mousemove', this.handleMouseMove);
+    this.componentEl.removeEventListener('mouseleave', this.handleMouseOut);
     this.container.removeChild(this.tooltipEl);
   };
 
@@ -109,13 +109,13 @@ class Tooltip extends React.Component {
           cOffsetY = componentHeight / 2;
           break;
       }
-      pointX = componentOffsetX + cOffsetX + window.scrollX;
-      pointY = componentOffsetY + cOffsetY + window.scrollY;
+      pointX = componentOffsetX + cOffsetX + (window.scrollX || window.pageXOffset);
+      pointY = componentOffsetY + cOffsetY + (window.scrollY || window.pageYOffset);
     } else {
       let clientX = e.clientX;
       let clientY = e.clientY;
-      pointX = clientX - containerOffsetX + window.scrollX;
-      pointY = clientY - containerOffsetY + window.scrollY;
+      pointX = clientX - containerOffsetX + (window.scrollX || window.pageXOffset);
+      pointY = clientY - containerOffsetY + (window.scrollY || window.pageYOffset);
     }
     return {
       x: pointX,