react-tooltip - npm Package Compare versions

Comparing version 0.1.8 to 0.2.0

dist/react-tooltip.js

@@ -39,3 +39,3 @@ 'use strict';
     this.setState({
-      placeholder: e.target.dataset.placeholder,
+      placeholder: e.target.dataset.tip,
       place: e.target.dataset.place ? e.target.dataset.place : this.props.place ? this.props.place : 'top'
@@ -61,3 +61,3 @@ });
   componentDidMount: function componentDidMount() {
-    var targetArray = document.querySelectorAll('[data-placeholder]');
+    var targetArray = document.querySelectorAll('[data-tip]');
     for (var i = 0; i < targetArray.length; i++) {
@@ -71,3 +71,3 @@ targetArray[i].addEventListener('mouseover', this.showTooltip, false);
   componentWillUnmount: function componentWillUnmount() {
-    var targetArray = document.querySelectorAll('[data-placeholder]');
+    var targetArray = document.querySelectorAll('[data-tip]');
     for (var i = 0; i < targetArray.length; i++) {
@@ -74,0 +74,0 @@ targetArray[i].removeEventListener('mouseover', this.showTooltip);

package.json

 {
   "name": "react-tooltip",
-  "version": "0.1.8",
+  "version": "0.2.0",
   "description": "react tooltip component",
@@ -8,8 +8,5 @@ "main": "dist/react-tooltip.js",
     "test": "jest",
-    "build:js": "babel src/js/index.jsx --out-file dist/react-tooltip.js & babel src/js/index.jsx --out-file example/src/react-tooltip.js",
+    "build:js": "babel src/js/index.jsx --out-file dist/react-tooltip.js",
     "build:css": "node-sass --output-style compressed src/scss/style.scss dist/react-tooltip.min.css",
-    "watch:js": "npm run build:js & watchify src/js/index.jsx -t babelify -o dist/react-tooltip.js -dv & watchify src/js/index.jsx -t babelify -o example/src/react-tooltip.js -dv",
-    "watch:css": "npm run build:css & node-sass -w --output-style compressed src/scss/style.scss dist/react-tooltip.min.css",
-    "build": "npm run build:js & npm run build:css & cp src/scss/style.scss dist/react-tooltip.scss & cp src/scss/style.scss example/src/react-tooltip.scss",
-    "dev": "npm run watch:js & npm run watch:css"
+    "build": "npm run build:js & npm run build:css & cp src/scss/style.scss dist/react-tooltip.scss & cp src/scss/style.scss example/src/react-tooltip.scss & cp src/js/index.jsx example/src/react-tooltip.js"
   },
@@ -16,0 +13,0 @@ "jest": {

README.md

@@ -21,3 +21,3 @@ # react-tooltip
 ```
-2 . Include css or scss file(you can find the file in dist folder) into your project
+2 . Include css or scss file(you can find them in dist folder) into your project
 
@@ -30,3 +30,3 @@ ```
 
-	<p data-placeholder="hello world">Tooltip</p>
+	<p data-tip="hello world">Tooltip</p>
 
@@ -41,25 +41,37 @@ 4 . Including react-tooltip component
 
-### Example
-[http://wwayne.github.io/react-tooltip](http://wwayne.github.io/react-tooltip/)
+### Options
+Every option has default value, You don't need to add option if default options are enough.
 
+The options set to `<ReactTooltip />` will affect all tootips in a same page and options set to specific element only affect the specific tooltip's behaviour
+
+##### Place: String ( top, right, bottom, left )
+Specific element:
+
+	<p data-tip="tooltip" data-place="top"></p>
+		
+global:	
+
 ```
-'use strict';
+<ReactTooltip place="top"/>
+```
+##### Type: String ( dark, success, warning, error, info, light )
+Specific element:
 
-var React = require("react");
-var ReactTooltip = require("../index");
+	<p data-tip="tooltip" data-type="dark"></p>
+		
+global:	
 
-var Index = React.createClass({
-  render: function() {
-    return (
-      <section className="tooltip-example">
-        <p data-placeholder="foo">hover on me</p>
-        <p data-placeholder="This is another hover test" data-place="bottom">Tooltip from bottom</p>
-        <ReactTooltip />
-      </section>
-    )
-  }
-});
+```
+<ReactTooltip type="dark"/>
+```
+##### Effect: String ( float, solid)
+Specific element:
 
-React.render(<Index />,document.body)
+	<p data-tip="tooltip" data-type="float"></p>
+	
+global:	
+
 ```
+<ReactTooltip type="float"/>
+```
 
@@ -66,0 +78,0 @@ ### License

src/js/index.jsx

@@ -11,3 +11,5 @@ 'use strict';
   propTypes: {
-    place: React.PropTypes.string
+    place: React.PropTypes.string,
+    type: React.PropTypes.string,
+    effect: React.PropTypes.string,
   },
@@ -19,5 +21,7 @@
       placeholder: "",
-      x: 0,
-      y: 0,
-      place: this.props.place?this.props.place:"top"
+      x: "NONE",
+      y: "NONE",
+      place: "",
+      type: "",
+      effect: "",
     }
@@ -28,4 +32,6 @@ },
     this.setState({
-      placeholder: e.target.dataset.placeholder,
-      place:e.target.dataset.place?e.target.dataset.place:(this.props.place?this.props.place:"top")
+      placeholder: e.target.dataset.tip,
+      place: e.target.dataset.place?e.target.dataset.place:(this.props.place?this.props.place:"top"),
+      type: e.target.dataset.type?e.target.dataset.type:(this.props.type?this.props.type:"dark"),
+      effect: e.target.dataset.effect?e.target.dataset.effect:(this.props.effect?this.props.effect:"float"),
     })
@@ -36,7 +42,40 @@ this.updateTooltip(e);
   updateTooltip(e) {
-    this.setState({
-      show: true,
-      x: e.clientX,
-      y: e.clientY
-    })
+    if(this.state.effect === "float") {
+      this.setState({
+        show: true,
+        x: e.clientX,
+        y: e.clientY
+      })
+    }
+    else if(this.state.effect === "solid"){
+      let targetTop = e.target.getBoundingClientRect().top;
+      let targetLeft = e.target.getBoundingClientRect().left;
+      let tipWidth = document.querySelector("[data-id='tooltip']")?document.querySelector("[data-id='tooltip']").clientWidth:0;
+      let tipHeight = document.querySelector("[data-id='tooltip']")?document.querySelector("[data-id='tooltip']").clientHeight:0;
+      let targetWidth = e.target.clientWidth;
+      let targetHeight = e.target.clientHeight;
+      let { place } = this.state;
+      let x, y ;
+      if(place === "top") {
+        x = targetLeft - (tipWidth/2) + (targetWidth/2);
+        y = targetTop - tipHeight - 8;
+      }
+      else if(place === "bottom") {
+        x = targetLeft - (tipWidth/2) + (targetWidth/2);
+        y = targetTop + targetHeight + 8;
+      }
+      else if(place === "left") {
+        x = targetLeft - tipWidth - 6;
+        y = targetTop + (targetHeight/2) - (tipHeight/2);
+      }
+      else if(place === "right") {
+        x = targetLeft + targetWidth + 6;
+        y = targetTop + (targetHeight/2) - (tipHeight/2);
+      }
+      this.setState({
+        show: true,
+        x: this.state.x === "NONE" ? x : this.state.x,
+        y: this.state.y === "NONE" ? y : this.state.y
+      })
+    }
   },
@@ -46,8 +85,10 @@
     this.setState({
-      show: false
-    })
+      show: false,
+      x: "NONE",
+      y: "NONE",
+    });
   },
 
   componentDidMount() {
-    var targetArray = document.querySelectorAll("[data-placeholder]");
+    var targetArray = document.querySelectorAll("[data-tip]");
     for(var i = 0; i < targetArray.length; i++) {
@@ -61,3 +102,3 @@ targetArray[i].addEventListener("mouseover", this.showTooltip, false);
   componentWillUnmount() {
-    var targetArray = document.querySelectorAll("[data-placeholder]");
+    var targetArray = document.querySelectorAll("[data-tip]");
     for(var i = 0; i < targetArray.length; i++) {
@@ -72,11 +113,23 @@ targetArray[i].removeEventListener("mouseover", this.showTooltip);
     let tipWidth = document.querySelector("[data-id='tooltip']")?document.querySelector("[data-id='tooltip']").clientWidth:0;
+    let tipHeight = document.querySelector("[data-id='tooltip']")?document.querySelector("[data-id='tooltip']").clientHeight:0;
     let offset = {x:0, y:0};
-    if(this.state.place === "top") {
-      offset.x = -(tipWidth/2);
-      offset.y = -50;
+    let { effect } = this.state;
+    if(effect === "float") {
+      if(this.state.place === "top") {
+        offset.x = -(tipWidth/2);
+        offset.y = -50;
+      }
+      else if(this.state.place === "bottom") {
+        offset.x = -(tipWidth/2);
+        offset.y = 30;
+      }
+      else if(this.state.place === "left") {
+        offset.x = -(tipWidth + 15);
+        offset.y = -(tipHeight/2);
+      }
+      else if(this.state.place === "right") {
+        offset.x = 10;
+        offset.y = -(tipHeight/2);
+      }
     }
-    else if(this.state.place === "bottom") {
-      offset.x = -(tipWidth/2);
-      offset.y = 30;
-    }
     let style = {
@@ -87,3 +140,16 @@ left: this.state.x + offset.x + "px",
 
-    let tooltipClass = classname({show: this.state.show},'reactTooltip');
+    let tooltipClass = classname(
+      'reactTooltip',
+      {"show": this.state.show},
+      {"place-top": this.state.place === "top"},
+      {"place-bottom": this.state.place === "bottom"},
+      {"place-left": this.state.place === "left"},
+      {"place-right": this.state.place === "right"},
+      {"type-dark": this.state.type === "dark"},
+      {"type-success": this.state.type === "success"},
+      {"type-warning": this.state.type === "warning"},
+      {"type-error": this.state.type === "error"},
+      {"type-info": this.state.type === "info"},
+      {"type-light": this.state.type === "light"}
+    );
 
@@ -90,0 +156,0 @@ return (

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Fixed alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Number of lines in readme file

78

increased by18.18%

Worsened metrics

Total package byte prevSize

15738

decreased by-99.03%

Number of package files

9

decreased by-52.63%

Lines of code

227

decreased by-98.96%

No dependency changes