react-tooltip 3.11.5 → 3.11.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +9 -1
- package/dist/index.es.js +17 -97
- package/dist/index.es.js.map +1 -1
- package/dist/index.js +17 -97
- package/dist/index.js.map +1 -1
- package/package.json +1 -2
package/README.md
CHANGED
|
@@ -11,6 +11,8 @@
|
|
|
11
11
|
|
|
12
12
|
[aronhelser](https://github.com/aronhelser) Passive maintainer - accepting PRs and doing minor testing, but not fixing issues or doing active development.
|
|
13
13
|
|
|
14
|
+
[Rogger794](https://github.com/Rogger794) Active maintainer - accepting PRs and doing minor testing, fixing issues or doing active development.
|
|
15
|
+
|
|
14
16
|
[huumanoid](https://github.com/huumanoid) (inactive)
|
|
15
17
|
|
|
16
18
|
We would gladly accept a new maintainer to help out!
|
|
@@ -21,6 +23,12 @@ We would gladly accept a new maintainer to help out!
|
|
|
21
23
|
npm install react-tooltip
|
|
22
24
|
```
|
|
23
25
|
|
|
26
|
+
or
|
|
27
|
+
|
|
28
|
+
```sh
|
|
29
|
+
yarn react-tooltip
|
|
30
|
+
```
|
|
31
|
+
|
|
24
32
|
## Usage
|
|
25
33
|
**Using NPM**
|
|
26
34
|
|
|
@@ -31,13 +39,13 @@ import ReactTooltip from 'react-tooltip'
|
|
|
31
39
|
```
|
|
32
40
|
|
|
33
41
|
2 . Add data-tip = "your placeholder" to your element
|
|
42
|
+
|
|
34
43
|
```jsx
|
|
35
44
|
<p data-tip="hello world">Tooltip</p>
|
|
36
45
|
```
|
|
37
46
|
|
|
38
47
|
3 . Include react-tooltip component
|
|
39
48
|
|
|
40
|
-
|
|
41
49
|
```js
|
|
42
50
|
<ReactTooltip />
|
|
43
51
|
```
|
package/dist/index.es.js
CHANGED
|
@@ -1046,55 +1046,6 @@ if (process.env.NODE_ENV !== 'production') {
|
|
|
1046
1046
|
}
|
|
1047
1047
|
});
|
|
1048
1048
|
|
|
1049
|
-
var classnames = createCommonjsModule(function (module) {
|
|
1050
|
-
/*!
|
|
1051
|
-
Copyright (c) 2017 Jed Watson.
|
|
1052
|
-
Licensed under the MIT License (MIT), see
|
|
1053
|
-
http://jedwatson.github.io/classnames
|
|
1054
|
-
*/
|
|
1055
|
-
/* global define */
|
|
1056
|
-
|
|
1057
|
-
(function () {
|
|
1058
|
-
|
|
1059
|
-
var hasOwn = {}.hasOwnProperty;
|
|
1060
|
-
|
|
1061
|
-
function classNames () {
|
|
1062
|
-
var classes = [];
|
|
1063
|
-
|
|
1064
|
-
for (var i = 0; i < arguments.length; i++) {
|
|
1065
|
-
var arg = arguments[i];
|
|
1066
|
-
if (!arg) continue;
|
|
1067
|
-
|
|
1068
|
-
var argType = typeof arg;
|
|
1069
|
-
|
|
1070
|
-
if (argType === 'string' || argType === 'number') {
|
|
1071
|
-
classes.push(arg);
|
|
1072
|
-
} else if (Array.isArray(arg) && arg.length) {
|
|
1073
|
-
var inner = classNames.apply(null, arg);
|
|
1074
|
-
if (inner) {
|
|
1075
|
-
classes.push(inner);
|
|
1076
|
-
}
|
|
1077
|
-
} else if (argType === 'object') {
|
|
1078
|
-
for (var key in arg) {
|
|
1079
|
-
if (hasOwn.call(arg, key) && arg[key]) {
|
|
1080
|
-
classes.push(key);
|
|
1081
|
-
}
|
|
1082
|
-
}
|
|
1083
|
-
}
|
|
1084
|
-
}
|
|
1085
|
-
|
|
1086
|
-
return classes.join(' ');
|
|
1087
|
-
}
|
|
1088
|
-
|
|
1089
|
-
if ( module.exports) {
|
|
1090
|
-
classNames.default = classNames;
|
|
1091
|
-
module.exports = classNames;
|
|
1092
|
-
} else {
|
|
1093
|
-
window.classNames = classNames;
|
|
1094
|
-
}
|
|
1095
|
-
}());
|
|
1096
|
-
});
|
|
1097
|
-
|
|
1098
1049
|
var CONSTANT = {
|
|
1099
1050
|
GLOBAL: {
|
|
1100
1051
|
HIDE: "__react_tooltip_hide_event",
|
|
@@ -1871,7 +1822,7 @@ function nodeListToArray (nodeList) {
|
|
|
1871
1822
|
});
|
|
1872
1823
|
}
|
|
1873
1824
|
|
|
1874
|
-
|
|
1825
|
+
___$insertStyle(".__react_component_tooltip {\n border-radius: 3px;\n display: inline-block;\n font-size: 13px;\n left: -999em;\n opacity: 0;\n padding: 8px 21px;\n position: fixed;\n pointer-events: none;\n transition: opacity 0.3s ease-out;\n top: -999em;\n visibility: hidden;\n z-index: 999;\n}\n.__react_component_tooltip.allow_hover, .__react_component_tooltip.allow_click {\n pointer-events: auto;\n}\n.__react_component_tooltip:before, .__react_component_tooltip:after {\n content: \"\";\n width: 0;\n height: 0;\n position: absolute;\n}\n.__react_component_tooltip.show {\n opacity: 0.9;\n margin-top: 0px;\n margin-left: 0px;\n visibility: visible;\n}\n.__react_component_tooltip.type-dark {\n color: #fff;\n background-color: #222;\n}\n.__react_component_tooltip.type-dark.place-top:after {\n border-top-color: #222;\n border-top-style: solid;\n border-top-width: 6px;\n}\n.__react_component_tooltip.type-dark.place-bottom:after {\n border-bottom-color: #222;\n border-bottom-style: solid;\n border-bottom-width: 6px;\n}\n.__react_component_tooltip.type-dark.place-left:after {\n border-left-color: #222;\n border-left-style: solid;\n border-left-width: 6px;\n}\n.__react_component_tooltip.type-dark.place-right:after {\n border-right-color: #222;\n border-right-style: solid;\n border-right-width: 6px;\n}\n.__react_component_tooltip.type-dark.border {\n border: 1px solid #fff;\n}\n.__react_component_tooltip.type-dark.border.place-top:before {\n border-top: 8px solid #fff;\n}\n.__react_component_tooltip.type-dark.border.place-bottom:before {\n border-bottom: 8px solid #fff;\n}\n.__react_component_tooltip.type-dark.border.place-left:before {\n border-left: 8px solid #fff;\n}\n.__react_component_tooltip.type-dark.border.place-right:before {\n border-right: 8px solid #fff;\n}\n.__react_component_tooltip.type-success {\n color: #fff;\n background-color: #8DC572;\n}\n.__react_component_tooltip.type-success.place-top:after {\n border-top-color: #8DC572;\n border-top-style: solid;\n border-top-width: 6px;\n}\n.__react_component_tooltip.type-success.place-bottom:after {\n border-bottom-color: #8DC572;\n border-bottom-style: solid;\n border-bottom-width: 6px;\n}\n.__react_component_tooltip.type-success.place-left:after {\n border-left-color: #8DC572;\n border-left-style: solid;\n border-left-width: 6px;\n}\n.__react_component_tooltip.type-success.place-right:after {\n border-right-color: #8DC572;\n border-right-style: solid;\n border-right-width: 6px;\n}\n.__react_component_tooltip.type-success.border {\n border: 1px solid #fff;\n}\n.__react_component_tooltip.type-success.border.place-top:before {\n border-top: 8px solid #fff;\n}\n.__react_component_tooltip.type-success.border.place-bottom:before {\n border-bottom: 8px solid #fff;\n}\n.__react_component_tooltip.type-success.border.place-left:before {\n border-left: 8px solid #fff;\n}\n.__react_component_tooltip.type-success.border.place-right:before {\n border-right: 8px solid #fff;\n}\n.__react_component_tooltip.type-warning {\n color: #fff;\n background-color: #F0AD4E;\n}\n.__react_component_tooltip.type-warning.place-top:after {\n border-top-color: #F0AD4E;\n border-top-style: solid;\n border-top-width: 6px;\n}\n.__react_component_tooltip.type-warning.place-bottom:after {\n border-bottom-color: #F0AD4E;\n border-bottom-style: solid;\n border-bottom-width: 6px;\n}\n.__react_component_tooltip.type-warning.place-left:after {\n border-left-color: #F0AD4E;\n border-left-style: solid;\n border-left-width: 6px;\n}\n.__react_component_tooltip.type-warning.place-right:after {\n border-right-color: #F0AD4E;\n border-right-style: solid;\n border-right-width: 6px;\n}\n.__react_component_tooltip.type-warning.border {\n border: 1px solid #fff;\n}\n.__react_component_tooltip.type-warning.border.place-top:before {\n border-top: 8px solid #fff;\n}\n.__react_component_tooltip.type-warning.border.place-bottom:before {\n border-bottom: 8px solid #fff;\n}\n.__react_component_tooltip.type-warning.border.place-left:before {\n border-left: 8px solid #fff;\n}\n.__react_component_tooltip.type-warning.border.place-right:before {\n border-right: 8px solid #fff;\n}\n.__react_component_tooltip.type-error {\n color: #fff;\n background-color: #BE6464;\n}\n.__react_component_tooltip.type-error.place-top:after {\n border-top-color: #BE6464;\n border-top-style: solid;\n border-top-width: 6px;\n}\n.__react_component_tooltip.type-error.place-bottom:after {\n border-bottom-color: #BE6464;\n border-bottom-style: solid;\n border-bottom-width: 6px;\n}\n.__react_component_tooltip.type-error.place-left:after {\n border-left-color: #BE6464;\n border-left-style: solid;\n border-left-width: 6px;\n}\n.__react_component_tooltip.type-error.place-right:after {\n border-right-color: #BE6464;\n border-right-style: solid;\n border-right-width: 6px;\n}\n.__react_component_tooltip.type-error.border {\n border: 1px solid #fff;\n}\n.__react_component_tooltip.type-error.border.place-top:before {\n border-top: 8px solid #fff;\n}\n.__react_component_tooltip.type-error.border.place-bottom:before {\n border-bottom: 8px solid #fff;\n}\n.__react_component_tooltip.type-error.border.place-left:before {\n border-left: 8px solid #fff;\n}\n.__react_component_tooltip.type-error.border.place-right:before {\n border-right: 8px solid #fff;\n}\n.__react_component_tooltip.type-info {\n color: #fff;\n background-color: #337AB7;\n}\n.__react_component_tooltip.type-info.place-top:after {\n border-top-color: #337AB7;\n border-top-style: solid;\n border-top-width: 6px;\n}\n.__react_component_tooltip.type-info.place-bottom:after {\n border-bottom-color: #337AB7;\n border-bottom-style: solid;\n border-bottom-width: 6px;\n}\n.__react_component_tooltip.type-info.place-left:after {\n border-left-color: #337AB7;\n border-left-style: solid;\n border-left-width: 6px;\n}\n.__react_component_tooltip.type-info.place-right:after {\n border-right-color: #337AB7;\n border-right-style: solid;\n border-right-width: 6px;\n}\n.__react_component_tooltip.type-info.border {\n border: 1px solid #fff;\n}\n.__react_component_tooltip.type-info.border.place-top:before {\n border-top: 8px solid #fff;\n}\n.__react_component_tooltip.type-info.border.place-bottom:before {\n border-bottom: 8px solid #fff;\n}\n.__react_component_tooltip.type-info.border.place-left:before {\n border-left: 8px solid #fff;\n}\n.__react_component_tooltip.type-info.border.place-right:before {\n border-right: 8px solid #fff;\n}\n.__react_component_tooltip.type-light {\n color: #222;\n background-color: #fff;\n}\n.__react_component_tooltip.type-light.place-top:after {\n border-top-color: #fff;\n border-top-style: solid;\n border-top-width: 6px;\n}\n.__react_component_tooltip.type-light.place-bottom:after {\n border-bottom-color: #fff;\n border-bottom-style: solid;\n border-bottom-width: 6px;\n}\n.__react_component_tooltip.type-light.place-left:after {\n border-left-color: #fff;\n border-left-style: solid;\n border-left-width: 6px;\n}\n.__react_component_tooltip.type-light.place-right:after {\n border-right-color: #fff;\n border-right-style: solid;\n border-right-width: 6px;\n}\n.__react_component_tooltip.type-light.border {\n border: 1px solid #222;\n}\n.__react_component_tooltip.type-light.border.place-top:before {\n border-top: 8px solid #222;\n}\n.__react_component_tooltip.type-light.border.place-bottom:before {\n border-bottom: 8px solid #222;\n}\n.__react_component_tooltip.type-light.border.place-left:before {\n border-left: 8px solid #222;\n}\n.__react_component_tooltip.type-light.border.place-right:before {\n border-right: 8px solid #222;\n}\n.__react_component_tooltip.place-top {\n margin-top: -10px;\n}\n.__react_component_tooltip.place-top:before {\n border-left: 10px solid transparent;\n border-right: 10px solid transparent;\n bottom: -8px;\n left: 50%;\n margin-left: -10px;\n}\n.__react_component_tooltip.place-top:after {\n border-left: 8px solid transparent;\n border-right: 8px solid transparent;\n bottom: -6px;\n left: 50%;\n margin-left: -8px;\n}\n.__react_component_tooltip.place-bottom {\n margin-top: 10px;\n}\n.__react_component_tooltip.place-bottom:before {\n border-left: 10px solid transparent;\n border-right: 10px solid transparent;\n top: -8px;\n left: 50%;\n margin-left: -10px;\n}\n.__react_component_tooltip.place-bottom:after {\n border-left: 8px solid transparent;\n border-right: 8px solid transparent;\n top: -6px;\n left: 50%;\n margin-left: -8px;\n}\n.__react_component_tooltip.place-left {\n margin-left: -10px;\n}\n.__react_component_tooltip.place-left:before {\n border-top: 6px solid transparent;\n border-bottom: 6px solid transparent;\n right: -8px;\n top: 50%;\n margin-top: -5px;\n}\n.__react_component_tooltip.place-left:after {\n border-top: 5px solid transparent;\n border-bottom: 5px solid transparent;\n right: -6px;\n top: 50%;\n margin-top: -4px;\n}\n.__react_component_tooltip.place-right {\n margin-left: 10px;\n}\n.__react_component_tooltip.place-right:before {\n border-top: 6px solid transparent;\n border-bottom: 6px solid transparent;\n left: -8px;\n top: 50%;\n margin-top: -5px;\n}\n.__react_component_tooltip.place-right:after {\n border-top: 5px solid transparent;\n border-bottom: 5px solid transparent;\n left: -6px;\n top: 50%;\n margin-top: -4px;\n}\n.__react_component_tooltip .multi-line {\n display: block;\n padding: 2px 0px;\n text-align: center;\n}");
|
|
1875
1826
|
|
|
1876
1827
|
var _class, _class2, _temp;
|
|
1877
1828
|
|
|
@@ -1947,10 +1898,6 @@ function (_React$Component) {
|
|
|
1947
1898
|
insecure = _this$props.insecure,
|
|
1948
1899
|
resizeHide = _this$props.resizeHide;
|
|
1949
1900
|
|
|
1950
|
-
if (insecure) {
|
|
1951
|
-
this.setStyleHeader(); // Set the style to the <link>
|
|
1952
|
-
}
|
|
1953
|
-
|
|
1954
1901
|
this.bindListener(); // Bind listener for tooltip
|
|
1955
1902
|
|
|
1956
1903
|
this.bindWindowEvents(resizeHide); // Bind global event for static method
|
|
@@ -2419,26 +2366,25 @@ function (_React$Component) {
|
|
|
2419
2366
|
* in this way we can insert default css
|
|
2420
2367
|
*/
|
|
2421
2368
|
|
|
2422
|
-
|
|
2423
|
-
|
|
2424
|
-
value: function setStyleHeader() {
|
|
2425
|
-
var head = document.getElementsByTagName("head")[0];
|
|
2426
|
-
|
|
2369
|
+
/* setStyleHeader() {
|
|
2370
|
+
const head = document.getElementsByTagName("head")[0];
|
|
2427
2371
|
if (!head.querySelector('style[id="react-tooltip"]')) {
|
|
2428
|
-
|
|
2372
|
+
const tag = document.createElement("style");
|
|
2429
2373
|
tag.id = "react-tooltip";
|
|
2430
|
-
tag.innerHTML = cssStyle;
|
|
2431
|
-
/* eslint-disable */
|
|
2374
|
+
tag.innerHTML = cssStyle; */
|
|
2432
2375
|
|
|
2433
|
-
|
|
2434
|
-
|
|
2435
|
-
|
|
2436
|
-
|
|
2376
|
+
/* eslint-disable */
|
|
2377
|
+
|
|
2378
|
+
/* if (typeof __webpack_nonce__ !== 'undefined' && __webpack_nonce__) {
|
|
2379
|
+
tag.setAttribute('nonce', __webpack_nonce__)
|
|
2380
|
+
}*/
|
|
2437
2381
|
|
|
2382
|
+
/* eslint-enable */
|
|
2438
2383
|
|
|
2439
|
-
|
|
2384
|
+
/* head.insertBefore(tag, head.firstChild);
|
|
2440
2385
|
}
|
|
2441
|
-
}
|
|
2386
|
+
} */
|
|
2387
|
+
|
|
2442
2388
|
/**
|
|
2443
2389
|
* CLear all kinds of timeout of interval
|
|
2444
2390
|
*/
|
|
@@ -2463,35 +2409,9 @@ function (_React$Component) {
|
|
|
2463
2409
|
disable = _this$state3.disable;
|
|
2464
2410
|
var placeholder = this.getTooltipContent();
|
|
2465
2411
|
var isEmptyTip = this.isEmptyTip(placeholder);
|
|
2466
|
-
var tooltipClass =
|
|
2467
|
-
|
|
2468
|
-
|
|
2469
|
-
border: this.state.border
|
|
2470
|
-
}, {
|
|
2471
|
-
"place-top": this.state.place === "top"
|
|
2472
|
-
}, {
|
|
2473
|
-
"place-bottom": this.state.place === "bottom"
|
|
2474
|
-
}, {
|
|
2475
|
-
"place-left": this.state.place === "left"
|
|
2476
|
-
}, {
|
|
2477
|
-
"place-right": this.state.place === "right"
|
|
2478
|
-
}, {
|
|
2479
|
-
"type-dark": this.state.type === "dark"
|
|
2480
|
-
}, {
|
|
2481
|
-
"type-success": this.state.type === "success"
|
|
2482
|
-
}, {
|
|
2483
|
-
"type-warning": this.state.type === "warning"
|
|
2484
|
-
}, {
|
|
2485
|
-
"type-error": this.state.type === "error"
|
|
2486
|
-
}, {
|
|
2487
|
-
"type-info": this.state.type === "info"
|
|
2488
|
-
}, {
|
|
2489
|
-
"type-light": this.state.type === "light"
|
|
2490
|
-
}, {
|
|
2491
|
-
allow_hover: this.props.delayUpdate
|
|
2492
|
-
}, {
|
|
2493
|
-
allow_click: this.props.clickable
|
|
2494
|
-
});
|
|
2412
|
+
var tooltipClass = "__react_component_tooltip" + (this.state.show && !disable && !isEmptyTip ? " show" : "") + (this.state.border ? " border" : "") + " place-".concat(this.state.place) + // top, bottom, left, right
|
|
2413
|
+
" type-".concat(this.state.type) + ( // dark, success, warning, error, info, light
|
|
2414
|
+
this.props.delayUpdate ? " allow_hover" : "") + (this.props.clickable ? " allow_click" : "");
|
|
2495
2415
|
var Wrapper = this.props.wrapper;
|
|
2496
2416
|
|
|
2497
2417
|
if (ReactTooltip.supportedWrappers.indexOf(Wrapper) < 0) {
|