react-tooltip 4.4.5 → 4.5.0
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 +34 -33
- package/dist/index.es.js +11 -6
- package/dist/index.es.js.map +1 -1
- package/dist/index.js +11 -6
- package/dist/index.js.map +1 -1
- package/dist/react-tooltip.d.ts +2 -0
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -61,39 +61,40 @@ Notes:
|
|
|
61
61
|
- The option you set on `<ReactTooltip />` component will be implemented on every tooltip in a same page: `<ReactTooltip effect="solid" />`
|
|
62
62
|
- The option you set on a specific element, for example: `<a data-type="warning"></a>` will only affect this specific tooltip
|
|
63
63
|
|
|
64
|
-
| Global
|
|
65
|
-
|
|
|
66
|
-
| place
|
|
67
|
-
| type
|
|
68
|
-
| effect
|
|
69
|
-
| event
|
|
70
|
-
| eventOff
|
|
71
|
-
| globalEventOff
|
|
72
|
-
| isCapture
|
|
73
|
-
| offset
|
|
74
|
-
| padding
|
|
75
|
-
| multiline
|
|
76
|
-
| className
|
|
77
|
-
| html
|
|
78
|
-
| delayHide
|
|
79
|
-
| delayShow
|
|
80
|
-
| delayUpdate
|
|
81
|
-
| insecure
|
|
82
|
-
| border
|
|
83
|
-
| borderClass
|
|
84
|
-
| textColor
|
|
85
|
-
| backgroundColor
|
|
86
|
-
| borderColor
|
|
87
|
-
| arrowColor
|
|
88
|
-
| getContent
|
|
89
|
-
| afterShow
|
|
90
|
-
| afterHide
|
|
91
|
-
| overridePosition
|
|
92
|
-
| disable
|
|
93
|
-
| scrollHide
|
|
94
|
-
| resizeHide
|
|
95
|
-
| wrapper
|
|
96
|
-
| clickable
|
|
64
|
+
| Global | Specific | Type | Values | Description |
|
|
65
|
+
| :------------------- | :-------------------- | :------------ | :------------------------------------------------------------------------------------------------------------------------------------ | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
66
|
+
| place | data-place | String | "top", "right", "bottom", "left", or comma-separated e.g. "left,right" | placement - can specify a comma-separated list of preferences that will be attempted in order |
|
|
67
|
+
| type | data-type | String | dark, success, warning, error, info, light | theme |
|
|
68
|
+
| effect | data-effect | String | float, solid | behaviour of tooltip |
|
|
69
|
+
| event | data-event | String | e.g. click | custom event to trigger tooltip |
|
|
70
|
+
| eventOff | data-event-off | String | e.g. click | custom event to hide tooltip (only makes effect after setting event attribute) |
|
|
71
|
+
| globalEventOff | | String | e.g. click | global event to hide tooltip (global only) |
|
|
72
|
+
| isCapture | data-iscapture | Bool | true, false | when set to true, custom event's propagation mode will be capture |
|
|
73
|
+
| offset | data-offset | Object | { top?: number, right?: number, bottom?: number, left?: number } | `data-offset="{'top': 10, 'left': 10}"` for specific and `offset={{top: 10, left: 10}}` for global |
|
|
74
|
+
| padding | data-padding | String | e.g. `8px 21px` | Popup padding style |
|
|
75
|
+
| multiline | data-multiline | Bool | true, false | support `<br>`, `<br />` to make multiline |
|
|
76
|
+
| className | data-class | String | | extra custom class, can use !important to overwrite react-tooltip's default class |
|
|
77
|
+
| html | data-html | Bool | true, false | `<p data-tip="<p>HTML tooltip</p>" data-html={true}></p>` or `<ReactTooltip html={true} />`, but see [Security Note](#security-note) below.<br/>When using JSX, see [this note](#jsx-note) below. |
|
|
78
|
+
| delayHide | data-delay-hide | Number | | `<p data-tip="tooltip" data-delay-hide='1000'></p>` or `<ReactTooltip delayHide={1000} />` |
|
|
79
|
+
| delayShow | data-delay-show | Number | | `<p data-tip="tooltip" data-delay-show='1000'></p>` or `<ReactTooltip delayShow={1000} />` |
|
|
80
|
+
| delayUpdate | data-delay-update | Number | | `<p data-tip="tooltip" data-delay-update='1000'></p>` or `<ReactTooltip delayUpdate={1000} />` Sets a delay in calling getContent if the tooltip is already shown and you mouse over another target |
|
|
81
|
+
| insecure | null | Bool | true, false | Whether to inject the style header into the page dynamically (violates CSP style-src but is a convenient default) |
|
|
82
|
+
| border | data-border | Bool | true, false | Add one pixel white border |
|
|
83
|
+
| borderClass | data-border-class | String | e.g. custom-border-class | A custom class name to use for the border - enabled by the `border` prop |
|
|
84
|
+
| textColor | data-text-color | String | e.g. red | Popup text color |
|
|
85
|
+
| backgroundColor | data-background-color | String | e.g. yellow | Popup background color |
|
|
86
|
+
| borderColor | data-border-color | String | e.g. green | Popup border color - enabled by the `border` value |
|
|
87
|
+
| arrowColor | data-arrow-color | String | e.g. #fff | Popup arrow color - if not specified, will use the `backgroundColor` value |
|
|
88
|
+
| getContent | null | Func or Array | (dataTip) => {}, [(dataTip) => {}, Interval] | Generate the tip content dynamically |
|
|
89
|
+
| afterShow | null | Func | (evt) => {} | Function that will be called after tooltip show, with event that triggered show |
|
|
90
|
+
| afterHide | null | Func | (evt) => {} | Function that will be called after tooltip hide, with event that triggered hide |
|
|
91
|
+
| overridePosition | null | Func | ({left:number, top: number}, currentEvent, currentTarget, node, place, desiredPlace, effect, offset) => ({left: number, top: number}) | Function that will replace tooltip position with custom one |
|
|
92
|
+
| disable | data-tip-disable | Bool | true, false | Disable the tooltip behaviour, default is false |
|
|
93
|
+
| scrollHide | data-scroll-hide | Bool | true, false | Hide the tooltip when scrolling, default is true |
|
|
94
|
+
| resizeHide | null | Bool | true, false | Hide the tooltip when resizing the window, default is true |
|
|
95
|
+
| wrapper | null | String | div, span | Selecting the wrapper element of the react tooltip, default is div |
|
|
96
|
+
| clickable | null | Bool | true, false | Enables tooltip to respond to mouse (or touch) events, default is false |
|
|
97
|
+
| disableInternalStyle | null | Bool | true, false | Disable internal styles to let custom styling of the tooltip being added |
|
|
97
98
|
|
|
98
99
|
### Security Note
|
|
99
100
|
|
package/dist/index.es.js
CHANGED
|
@@ -2508,11 +2508,15 @@ var ReactTooltip = staticMethods(_class = windowListener(_class = customEvent(_c
|
|
|
2508
2508
|
value: function componentDidMount() {
|
|
2509
2509
|
var _this$props = this.props;
|
|
2510
2510
|
_this$props.insecure;
|
|
2511
|
-
var resizeHide = _this$props.resizeHide
|
|
2511
|
+
var resizeHide = _this$props.resizeHide,
|
|
2512
|
+
disableInternalStyle = _this$props.disableInternalStyle;
|
|
2512
2513
|
this.mount = true;
|
|
2513
2514
|
this.bindListener(); // Bind listener for tooltip
|
|
2514
2515
|
this.bindWindowEvents(resizeHide); // Bind global event for static method
|
|
2515
|
-
|
|
2516
|
+
|
|
2517
|
+
if (!disableInternalStyle) {
|
|
2518
|
+
this.injectStyles(); // Inject styles for each DOM root having tooltip.
|
|
2519
|
+
}
|
|
2516
2520
|
}
|
|
2517
2521
|
}, {
|
|
2518
2522
|
key: "componentWillUnmount",
|
|
@@ -3065,7 +3069,7 @@ var ReactTooltip = staticMethods(_class = windowListener(_class = customEvent(_c
|
|
|
3065
3069
|
uuid = _this$state3.uuid;
|
|
3066
3070
|
var content = this.getTooltipContent();
|
|
3067
3071
|
var isEmptyTip = this.isEmptyTip(content);
|
|
3068
|
-
var style = generateTooltipStyle(this.state.uuid, this.state.customColors, this.state.type, this.state.border, this.state.padding, this.state.customRadius);
|
|
3072
|
+
var style = this.props.disableInternalStyle ? '' : generateTooltipStyle(this.state.uuid, this.state.customColors, this.state.type, this.state.border, this.state.padding, this.state.customRadius);
|
|
3069
3073
|
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
|
|
3070
3074
|
" type-".concat(this.hasCustomColors() ? 'custom' : this.state.type) + (
|
|
3071
3075
|
// dark, success, warning, error, info, light, custom
|
|
@@ -3076,7 +3080,7 @@ var ReactTooltip = staticMethods(_class = windowListener(_class = customEvent(_c
|
|
|
3076
3080
|
}
|
|
3077
3081
|
var wrapperClassName = [tooltipClass, extraClass].filter(Boolean).join(' ');
|
|
3078
3082
|
if (html) {
|
|
3079
|
-
var htmlContent = "".concat(content
|
|
3083
|
+
var htmlContent = "".concat(content).concat(style ? "\n<style aria-hidden=\"true\">".concat(style, "</style>") : '');
|
|
3080
3084
|
return /*#__PURE__*/React.createElement(Wrapper, _extends({
|
|
3081
3085
|
className: "".concat(wrapperClassName),
|
|
3082
3086
|
id: this.props.id || uuid,
|
|
@@ -3098,7 +3102,7 @@ var ReactTooltip = staticMethods(_class = windowListener(_class = customEvent(_c
|
|
|
3098
3102
|
return _this9.tooltipRef = _ref2;
|
|
3099
3103
|
},
|
|
3100
3104
|
"data-id": "tooltip"
|
|
3101
|
-
}), /*#__PURE__*/React.createElement("style", {
|
|
3105
|
+
}), style && /*#__PURE__*/React.createElement("style", {
|
|
3102
3106
|
dangerouslySetInnerHTML: {
|
|
3103
3107
|
__html: style
|
|
3104
3108
|
},
|
|
@@ -3149,7 +3153,8 @@ var ReactTooltip = staticMethods(_class = windowListener(_class = customEvent(_c
|
|
|
3149
3153
|
bodyMode: PropTypes.bool,
|
|
3150
3154
|
possibleCustomEvents: PropTypes.string,
|
|
3151
3155
|
possibleCustomEventsOff: PropTypes.string,
|
|
3152
|
-
clickable: PropTypes.bool
|
|
3156
|
+
clickable: PropTypes.bool,
|
|
3157
|
+
disableInternalStyle: PropTypes.bool
|
|
3153
3158
|
};
|
|
3154
3159
|
}
|
|
3155
3160
|
}, {
|