react-tooltip - npm Package Compare versions

Comparing version 0.3.7 to 0.3.8

dist/react-tooltip.js

@@ -50,3 +50,3 @@ 'use strict';
       show: false,
-      multiline: 0,
+      multilineCount: 0,
       placeholder: "",
@@ -58,2 +58,3 @@ x: "NONE",
       effect: "",
+      multiline: false,
       position: {}
@@ -154,11 +155,11 @@ };
       var originTooltip = e.target.getAttribute("data-tip"),
-          regexp = /<br\s*\W*>|\W+/;
+          regexp = /<br\s*\W*>|\W+/,
+          multiline = e.target.getAttribute("data-multiline") ? e.target.getAttribute("data-multiline") : this.props.multiline ? this.props.multiline : false;
       var tooltipText = undefined,
-          multiline = false;
-
-      if (!regexp.test(originTooltip)) {
+          multilineCount = 0;
+      if (!multiline || multiline === "false" || !regexp.test(originTooltip)) {
         tooltipText = originTooltip;
       } else {
         tooltipText = originTooltip.split(regexp).map(function (d, i) {
-          multiline += 1;
+          multilineCount += 1;
           return _react2['default'].createElement(
@@ -173,7 +174,13 @@ 'span',
         placeholder: tooltipText,
-        multiline: multiline,
+        multilineCount: multilineCount,
         place: e.target.getAttribute("data-place") ? e.target.getAttribute("data-place") : this.props.place ? this.props.place : "top",
+
         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",
-        position: e.target.getAttribute("data-position") ? e.target.getAttribute("data-position") : this.props.position ? this.props.position : {}
+
+        position: e.target.getAttribute("data-position") ? e.target.getAttribute("data-position") : this.props.position ? this.props.position : {},
+
+        multiline: multiline
+
       });
@@ -187,7 +194,7 @@ this.updateTooltip(e);
         var _state = this.state;
-        var multiline = _state.multiline;
+        var multilineCount = _state.multilineCount;
         var place = _state.place;
 
         if (this.state.effect === "float") {
-          var offsetY = !multiline ? e.clientY : place !== "top" ? e.clientY : e.clientY - multiline * 14.5;
+          var offsetY = !multilineCount ? e.clientY : place !== "top" ? e.clientY : e.clientY - multilineCount * 14.5;
 
@@ -286,3 +293,4 @@ this.setState({
   effect: _react.PropTypes.string,
-  position: _react.PropTypes.object
+  position: _react.PropTypes.object,
+  multiline: _react.PropTypes.bool
 };
@@ -289,0 +297,0 @@

package.json

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

README.md

@@ -84,5 +84,16 @@ # react-tooltip
 
+##### Multiline: Bool [ true, false ]
 
+```js
+Specific element:
+	<p data-tip="tooltip a     b" data-multiline="true"></p>
+	<p data-tip="tooltip<br>a<br />b" data-multiline={true}></p>
+	
+global:	
+	<ReactTooltip multiline={true}/>
+```
+
+
 ### License
 
 MIT

src/js/index.jsx

@@ -17,3 +17,3 @@ 'use strict';
       show: false,
-      multiline: 0,
+      multilineCount: 0,
       placeholder: "",
@@ -25,2 +25,3 @@ x: "NONE",
       effect: "",
+      multiline: false,
       position: {}
@@ -119,6 +120,12 @@ };
     const originTooltip = e.target.getAttribute("data-tip"),
-          regexp = /<br\s*\W*>|\W+/;
-    let tooltipText, multiline = false;
-
-    if(!regexp.test(originTooltip)) {
+          regexp = /<br\s*\W*>|\W+/ , 
+          multiline = e.target.getAttribute("data-multiline") ? 
+                        e.target.getAttribute("data-multiline") :
+                        this.props.multiline ? 
+                          this.props.multiline :
+                          false 
+                      ;
+    let tooltipText, 
+        multilineCount = 0 ;
+    if(!multiline || multiline === "false" || !regexp.test(originTooltip)) {
       tooltipText = originTooltip
@@ -128,3 +135,3 @@ }
       tooltipText = originTooltip.split(regexp).map((d, i) => {
-        multiline += 1;
+        multilineCount += 1;
         return (
@@ -137,7 +144,29 @@ <span key={i} className="multi-line">{d}</span>
       placeholder: tooltipText,
-      multiline: multiline,
-      place: e.target.getAttribute("data-place")?e.target.getAttribute("data-place"):(this.props.place?this.props.place:"top"),
-      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"),
-      position: e.target.getAttribute("data-position")?e.target.getAttribute("data-position"):(this.props.position?this.props.position:{}),
+      multilineCount: multilineCount,
+      place: e.target.getAttribute("data-place") ? 
+                e.target.getAttribute("data-place") :
+                this.props.place ? 
+                    this.props.place : 
+                    "top"
+      ,
+      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"
+      ,
+      position: e.target.getAttribute("data-position") ? 
+                  e.target.getAttribute("data-position") :
+                  this.props.position ? 
+                      this.props.position :
+                      {}
+      ,
+      multiline: multiline
+      ,
     })
@@ -149,9 +178,9 @@ this.updateTooltip(e);
     if(this.trim(this.state.placeholder).length > 0) {
-      const {multiline, place} = this.state;
+      const {multilineCount, place} = this.state;
       if(this.state.effect === "float") {
-        const offsetY = !multiline ? 
+        const offsetY = !multilineCount ? 
           e.clientY : 
           place !== "top" ? 
             e.clientY:
-            e.clientY - multiline * 14.5
+            e.clientY - multilineCount * 14.5
 
@@ -258,5 +287,6 @@ this.setState({
   effect: PropTypes.string,
-  position: PropTypes.object
+  position: PropTypes.object,
+  multiline: PropTypes.bool
 };
 
 export default ReactTooltip;

No alert changes

Improved metrics

Total package byte prevSize

32770

increased by4.46%

Lines of code

536

increased by6.99%

Number of lines in readme file

99

increased by12.5%

No dependency changes