react-tooltip - npm Package Compare versions

Comparing version 0.2.6 to 0.2.7

dist/react-tooltip.js

@@ -24,4 +24,4 @@ 'use strict';
     type: _react2['default'].PropTypes.string,
-    effect: _react2['default'].PropTypes.string
-  },
+    effect: _react2['default'].PropTypes.string,
+    positon: _react2['default'].PropTypes.object },
 
@@ -36,6 +36,24 @@ getInitialState: function getInitialState() {
       type: '',
-      effect: ''
-    };
+      effect: '',
+      position: {} };
   },
 
+  componentDidMount: function componentDidMount() {
+    var targetArray = document.querySelectorAll('[data-tip]');
+    for (var i = 0; i < targetArray.length; i++) {
+      targetArray[i].addEventListener('mouseenter', this.showTooltip, false);
+      targetArray[i].addEventListener('mousemove', this.updateTooltip, false);
+      targetArray[i].addEventListener('mouseleave', this.hideTooltip, false);
+    }
+  },
+
+  componentWillUnmount: function componentWillUnmount() {
+    var targetArray = document.querySelectorAll('[data-tip]');
+    for (var i = 0; i < targetArray.length; i++) {
+      targetArray[i].removeEventListener('mouseenter', this.showTooltip);
+      targetArray[i].removeEventListener('mousemove', this.updateTooltip);
+      targetArray[i].removeEventListener('mouseleave', this.hideTooltip);
+    }
+  },
+
   showTooltip: function showTooltip(e) {
@@ -46,4 +64,4 @@ this.setState({
       type: e.target.getAttribute('data-type') ? e.target.getAttribute('data-type') : this.props.type ? this.props.type : 'dark',
-      effect: e.target.getAttribute('data-effect') ? e.target.getAttribute('data-effect') : this.props.effect ? this.props.effect : 'float'
-    });
+      effect: e.target.getAttribute('data-effect') ? e.target.getAttribute('data-effect') : this.props.effect ? this.props.effect : 'float',
+      position: e.target.getAttribute('data-position') ? e.target.getAttribute('data-position') : this.props.position ? this.props.position : {} });
     this.updateTooltip(e);
@@ -97,4 +115,3 @@ },
       x: 'NONE',
-      y: 'NONE'
-    });
+      y: 'NONE' });
   },
@@ -123,20 +140,2 @@
 
-  componentDidMount: function componentDidMount() {
-    var targetArray = document.querySelectorAll('[data-tip]');
-    for (var i = 0; i < targetArray.length; i++) {
-      targetArray[i].addEventListener('mouseenter', this.showTooltip, false);
-      targetArray[i].addEventListener('mousemove', this.updateTooltip, false);
-      targetArray[i].addEventListener('mouseleave', this.hideTooltip, false);
-    }
-  },
-
-  componentWillUnmount: function componentWillUnmount() {
-    var targetArray = document.querySelectorAll('[data-tip]');
-    for (var i = 0; i < targetArray.length; i++) {
-      targetArray[i].removeEventListener('mouseenter', this.showTooltip);
-      targetArray[i].removeEventListener('mousemove', this.updateTooltip);
-      targetArray[i].removeEventListener('mouseleave', this.hideTooltip);
-    }
-  },
-
   render: function render() {
@@ -163,5 +162,22 @@ var tipWidth = document.querySelector('[data-id=\'tooltip\']') ? document.querySelector('[data-id=\'tooltip\']').clientWidth : 0;
     }
+    var xPosition = 0;var yPosition = 0;var position = this.state.position;
+
+    if (Object.prototype.toString.apply(position) === '[object String]') {
+      position = JSON.parse(position);
+    }
+    for (var key in position) {
+      if (key === 'top') {
+        yPosition -= parseInt(position[key]);
+      } else if (key === 'bottom') {
+        yPosition += parseInt(position[key]);
+      } else if (key === 'left') {
+        xPosition -= parseInt(position[key]);
+      } else if (key === 'right') {
+        xPosition += parseInt(position[key]);
+      }
+    }
+
     var style = {
-      left: this.state.x + offset.x + 'px',
-      top: this.state.y + offset.y + 'px'
+      left: this.state.x + offset.x + xPosition + 'px',
+      top: this.state.y + offset.y + yPosition + 'px'
     };
@@ -168,0 +184,0 @@

package.json

 {
   "name": "react-tooltip",
-  "version": "0.2.6",
+  "version": "0.2.7",
   "description": "react tooltip component",
@@ -5,0 +5,0 @@ "main": "dist/react-tooltip.js",

README.md

@@ -74,4 +74,15 @@ # react-tooltip
 
+##### Position: Object [ top, right, bottom, left ]
+
+```js
+Specific element:
+	<p data-tip="tooltip" data-position="{'top': 10, 'left': 10}"></p>
+	
+global:	
+	<ReactTooltip type="float" position={top: 10, left: 10}/>
+```
+
+
 ### License
 
 MIT

src/js/index.jsx

@@ -14,2 +14,3 @@ 'use strict';
     effect: React.PropTypes.string,
+    positon: React.PropTypes.object,
   },
@@ -26,5 +27,24 @@
       effect: "",
+      position: {},
     }
   },
 
+  componentDidMount() {
+    let targetArray = document.querySelectorAll("[data-tip]");
+    for(let i = 0; i < targetArray.length; i++) {
+      targetArray[i].addEventListener("mouseenter", this.showTooltip, false);
+      targetArray[i].addEventListener("mousemove", this.updateTooltip, false);
+      targetArray[i].addEventListener("mouseleave", this.hideTooltip, false);
+    }
+  },
+
+  componentWillUnmount() {
+    let targetArray = document.querySelectorAll("[data-tip]");
+    for(let i = 0; i < targetArray.length; i++) {
+      targetArray[i].removeEventListener("mouseenter", this.showTooltip);
+      targetArray[i].removeEventListener("mousemove", this.updateTooltip);
+      targetArray[i].removeEventListener("mouseleave", this.hideTooltip);
+    }
+  },
+
   showTooltip(e) {
@@ -36,2 +56,3 @@ this.setState({
       effect: e.target.getAttribute("data-effect")?e.target.getAttribute("data-effect"):(this.props.effect?this.props.effect:"float"),
+      position: e.target.getAttribute("data-position")?e.target.getAttribute("data-position"):(this.props.position?this.props.position:{}),
     })
@@ -112,20 +133,2 @@ this.updateTooltip(e);
 
-  componentDidMount() {
-    let targetArray = document.querySelectorAll("[data-tip]");
-    for(let i = 0; i < targetArray.length; i++) {
-      targetArray[i].addEventListener("mouseenter", this.showTooltip, false);
-      targetArray[i].addEventListener("mousemove", this.updateTooltip, false);
-      targetArray[i].addEventListener("mouseleave", this.hideTooltip, false);
-    }
-  },
-
-  componentWillUnmount() {
-    let targetArray = document.querySelectorAll("[data-tip]");
-    for(let i = 0; i < targetArray.length; i++) {
-      targetArray[i].removeEventListener("mouseenter", this.showTooltip);
-      targetArray[i].removeEventListener("mousemove", this.updateTooltip);
-      targetArray[i].removeEventListener("mouseleave", this.hideTooltip);
-    }
-  },
-
   render() {
@@ -154,5 +157,24 @@ let tipWidth = document.querySelector("[data-id='tooltip']")?document.querySelector("[data-id='tooltip']").clientWidth:0;
     }
+    let xPosition = 0, yPosition = 0, {position} = this.state;
+    if(Object.prototype.toString.apply(position) === "[object String]") {
+      position = JSON.parse(position);
+    }
+    for(let key in position) {
+      if(key === "top") {
+        yPosition -= parseInt(position[key]);
+      }
+      else if(key === "bottom") {
+        yPosition += parseInt(position[key]);
+      }
+      else if(key === "left") {
+        xPosition -= parseInt(position[key]);
+      }
+      else if(key === "right") {
+        xPosition += parseInt(position[key]);
+      }
+    }
+
     let style = {
-      left: this.state.x + offset.x + "px",
-      top: this.state.y + offset.y + "px"
+      left: this.state.x + offset.x + xPosition + "px",
+      top: this.state.y + offset.y + yPosition + "px"
     }
@@ -159,0 +181,0 @@

No alert changes

Improved metrics

Total package byte prevSize

28280

increased by20.51%

Number of package files

10

increased by11.11%

Lines of code

437

increased by33.64%

Number of lines in readme file

88

increased by14.29%

No dependency changes