react-tooltip 4.4.0 → 4.4.3
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/dist/index.es.js +19 -5
- package/dist/index.es.js.map +1 -1
- package/dist/index.js +19 -5
- package/dist/index.js.map +1 -1
- package/package.json +2 -2
package/dist/index.es.js
CHANGED
|
@@ -2340,7 +2340,7 @@ function generateUUID() {
|
|
|
2340
2340
|
return 't' + v4();
|
|
2341
2341
|
}
|
|
2342
2342
|
|
|
2343
|
-
var baseCss = ".__react_component_tooltip {\n border-radius: 3px;\n display: inline-block;\n font-size: 13px;\n left: -999em;\n opacity: 0;\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: 0;\n margin-left: 0;\n visibility: visible;\n}\n.__react_component_tooltip.place-top::before {\n
|
|
2343
|
+
var baseCss = ".__react_component_tooltip {\n border-radius: 3px;\n display: inline-block;\n font-size: 13px;\n left: -999em;\n opacity: 0;\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: 0;\n margin-left: 0;\n visibility: visible;\n}\n.__react_component_tooltip.place-top::before {\n bottom: 0;\n left: 50%;\n margin-left: -11px;\n}\n.__react_component_tooltip.place-bottom::before {\n top: 0;\n left: 50%;\n margin-left: -11px;\n}\n.__react_component_tooltip.place-left::before {\n right: 0;\n top: 50%;\n margin-top: -9px;\n}\n.__react_component_tooltip.place-right::before {\n left: 0;\n top: 50%;\n margin-top: -9px;\n}\n.__react_component_tooltip .multi-line {\n display: block;\n padding: 2px 0;\n text-align: center;\n}";
|
|
2344
2344
|
|
|
2345
2345
|
/**
|
|
2346
2346
|
* Default pop-up style values (text color, background color).
|
|
@@ -2387,12 +2387,16 @@ function getDefaultPopupColors(type) {
|
|
|
2387
2387
|
return defaultColors[type] ? _objectSpread2({}, defaultColors[type]) : undefined;
|
|
2388
2388
|
}
|
|
2389
2389
|
var DEFAULT_PADDING = '8px 21px';
|
|
2390
|
+
var DEFAULT_RADIUS = {
|
|
2391
|
+
tooltip: 3,
|
|
2392
|
+
arrow: 0
|
|
2393
|
+
};
|
|
2390
2394
|
|
|
2391
2395
|
/**
|
|
2392
2396
|
* Generates the specific tooltip style for use on render.
|
|
2393
2397
|
*/
|
|
2394
|
-
function generateTooltipStyle(uuid, customColors, type, hasBorder, padding) {
|
|
2395
|
-
return generateStyle(uuid, getPopupColors(customColors, type, hasBorder), padding);
|
|
2398
|
+
function generateTooltipStyle(uuid, customColors, type, hasBorder, padding, radius) {
|
|
2399
|
+
return generateStyle(uuid, getPopupColors(customColors, type, hasBorder), padding, radius);
|
|
2396
2400
|
}
|
|
2397
2401
|
|
|
2398
2402
|
/**
|
|
@@ -2400,11 +2404,14 @@ function generateTooltipStyle(uuid, customColors, type, hasBorder, padding) {
|
|
|
2400
2404
|
*/
|
|
2401
2405
|
function generateStyle(uuid, colors) {
|
|
2402
2406
|
var padding = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : DEFAULT_PADDING;
|
|
2407
|
+
var radius = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : DEFAULT_RADIUS;
|
|
2403
2408
|
var textColor = colors.text;
|
|
2404
2409
|
var backgroundColor = colors.background;
|
|
2405
2410
|
var borderColor = colors.border;
|
|
2406
2411
|
var arrowColor = colors.arrow;
|
|
2407
|
-
|
|
2412
|
+
var arrowRadius = radius.arrow;
|
|
2413
|
+
var tooltipRadius = radius.tooltip;
|
|
2414
|
+
return "\n \t.".concat(uuid, " {\n\t color: ").concat(textColor, ";\n\t background: ").concat(backgroundColor, ";\n\t border: 1px solid ").concat(borderColor, ";\n\t border-radius: ").concat(tooltipRadius, "px;\n\t padding: ").concat(padding, ";\n \t}\n\n \t.").concat(uuid, ".place-top {\n margin-top: -10px;\n }\n .").concat(uuid, ".place-top::before {\n content: \"\";\n background-color: inherit;\n position: absolute;\n z-index: 2;\n width: 18px;\n height: 10px;\n }\n .").concat(uuid, ".place-top::after {\n content: \"\";\n position: absolute;\n width: 10px;\n height: 10px;\n border-top-right-radius: ").concat(arrowRadius, "px;\n border: 1px solid ").concat(borderColor, ";\n background-color: ").concat(arrowColor, ";\n z-index: 1;\n bottom: -6px;\n left: 50%;\n margin-left: -8px;\n transform: rotate(135deg);\n }\n\n .").concat(uuid, ".place-bottom {\n margin-top: 10px;\n }\n .").concat(uuid, ".place-bottom::before {\n content: \"\";\n background-color: inherit;\n position: absolute;\n z-index: 2;\n width: 18px;\n height: 10px;\n }\n .").concat(uuid, ".place-bottom::after {\n content: \"\";\n position: absolute;\n width: 10px;\n height: 10px;\n border-top-right-radius: ").concat(arrowRadius, "px;\n border: 1px solid ").concat(borderColor, ";\n background-color: ").concat(arrowColor, ";\n z-index: 1;\n top: -6px;\n left: 50%;\n margin-left: -8px;\n transform: rotate(45deg);\n }\n\n .").concat(uuid, ".place-left {\n margin-left: -10px;\n }\n .").concat(uuid, ".place-left::before {\n content: \"\";\n background-color: inherit;\n position: absolute;\n z-index: 2;\n width: 10px;\n height: 18px;\n }\n .").concat(uuid, ".place-left::after {\n content: \"\";\n position: absolute;\n width: 10px;\n height: 10px;\n border-top-right-radius: ").concat(arrowRadius, "px;\n border: 1px solid ").concat(borderColor, ";\n background-color: ").concat(arrowColor, ";\n z-index: 1;\n right: -6px;\n top: 50%;\n margin-top: -6px;\n transform: rotate(45deg);\n }\n\n .").concat(uuid, ".place-right {\n margin-left: 10px;\n }\n .").concat(uuid, ".place-right::before {\n content: \"\";\n background-color: inherit;\n position: absolute;\n z-index: 2;\n width: 10px;\n height: 18px;\n }\n .").concat(uuid, ".place-right::after {\n content: \"\";\n position: absolute;\n width: 10px;\n height: 10px;\n border-top-right-radius: ").concat(arrowRadius, "px;\n border: 1px solid ").concat(borderColor, ";\n background-color: ").concat(arrowColor, ";\n z-index: 1;\n left: -6px;\n top: 50%;\n margin-top: -6px;\n transform: rotate(-135deg);\n }\n ");
|
|
2408
2415
|
}
|
|
2409
2416
|
function getPopupColors(customColors, type, hasBorder) {
|
|
2410
2417
|
var textColor = customColors.text;
|
|
@@ -2454,6 +2461,7 @@ var ReactTooltip = staticMethods(_class = windowListener(_class = customEvent(_c
|
|
|
2454
2461
|
border: false,
|
|
2455
2462
|
borderClass: 'border',
|
|
2456
2463
|
customColors: {},
|
|
2464
|
+
customRadius: {},
|
|
2457
2465
|
offset: {},
|
|
2458
2466
|
padding: props.padding,
|
|
2459
2467
|
extraClass: '',
|
|
@@ -2779,6 +2787,10 @@ var ReactTooltip = staticMethods(_class = windowListener(_class = customEvent(_c
|
|
|
2779
2787
|
border: target.getAttribute('data-border-color') || self.props.borderColor || null,
|
|
2780
2788
|
arrow: target.getAttribute('data-arrow-color') || self.props.arrowColor || null
|
|
2781
2789
|
},
|
|
2790
|
+
customRadius: {
|
|
2791
|
+
tooltip: target.getAttribute('data-tooltip-radius') || self.props.tooltipRadius || '3',
|
|
2792
|
+
arrow: target.getAttribute('data-arrow-radius') || self.props.arrowRadius || '0'
|
|
2793
|
+
},
|
|
2782
2794
|
effect: effect,
|
|
2783
2795
|
offset: offset,
|
|
2784
2796
|
padding: target.getAttribute('data-padding') || self.props.padding,
|
|
@@ -3053,7 +3065,7 @@ var ReactTooltip = staticMethods(_class = windowListener(_class = customEvent(_c
|
|
|
3053
3065
|
uuid = _this$state3.uuid;
|
|
3054
3066
|
var content = this.getTooltipContent();
|
|
3055
3067
|
var isEmptyTip = this.isEmptyTip(content);
|
|
3056
|
-
var style = generateTooltipStyle(this.state.uuid, this.state.customColors, this.state.type, this.state.border, this.state.padding);
|
|
3068
|
+
var style = generateTooltipStyle(this.state.uuid, this.state.customColors, this.state.type, this.state.border, this.state.padding, this.state.customRadius);
|
|
3057
3069
|
var tooltipClass = '__react_component_tooltip' + " ".concat(this.state.uuid) + (this.state.show && !disable && !isEmptyTip ? ' show' : '') + (this.state.border ? ' ' + this.state.borderClass : '') + " place-".concat(this.state.place) + // top, bottom, left, right
|
|
3058
3070
|
" type-".concat(this.hasCustomColors() ? 'custom' : this.state.type) + (
|
|
3059
3071
|
// dark, success, warning, error, info, light, custom
|
|
@@ -3112,6 +3124,8 @@ var ReactTooltip = staticMethods(_class = windowListener(_class = customEvent(_c
|
|
|
3112
3124
|
backgroundColor: PropTypes.string,
|
|
3113
3125
|
borderColor: PropTypes.string,
|
|
3114
3126
|
arrowColor: PropTypes.string,
|
|
3127
|
+
arrowRadius: PropTypes.string,
|
|
3128
|
+
tooltipRadius: PropTypes.string,
|
|
3115
3129
|
insecure: PropTypes.bool,
|
|
3116
3130
|
"class": PropTypes.string,
|
|
3117
3131
|
className: PropTypes.string,
|