Skip to content

Commit 0f9fe54

Browse files
wwaynewwayne
committed
Merge pull request #96 from wwayne/iscapture
New attribute isCapture, deprecate eventPropagationMode
2 parents 683fbfa + 85f1c98 commit 0f9fe54

File tree

8 files changed

+52
-37
lines changed

8 files changed

+52
-37
lines changed

‎README.md

+4-3
Original file line numberDiff line numberDiff line change
@@ -51,12 +51,13 @@ Check example: [React-tooltip Test](http://wwayne.com/react-tooltip)
5151
type | data-type | String | success, warning, error, info, light | tooltip's color theme
5252
effect | data-effect | String | float, solid | either float or pinned
5353
event | data-event | String | e.g. click | custom event to trigger tooltip
54-
offset | data-offset | Object | top, right, bottom, left | data-offset="{'top': 10, 'left': 10}" for specific and offset={{top: 10, left: 10}} for global
54+
isCapture | data-iscapture | Bool | true, false | when set to ture, custom event's propagation mode will be capture, default is false, `<p data-tip="tooltip" data-event='click' data-iscapture='true'></p>` or `<ReactTooltip isCapture={true} />` |
55+
offset | data-offset | Object | top, right, bottom, left | `data-offset="{'top': 10, 'left': 10}"` for specific and `offset={{top: 10, left: 10}}` for global
5556
multiline | data-multiline | Bool | true, false | support `<br>`, `<br />` to make multiline
5657
class | data-class | String | your custom class | extra custom class, can use !important to cover react-tooltip's default class
5758
html | data-html | Bool | true, false | `<p data-tip="<p>HTML tooltip</p>" data-html={true}></p>` or `<ReactTooltip html={true} />`
58-
delayHide | data-delay-hide | Number | | `<p data-tip="tooltip" data-delay-hide='1000'></p>` or `<ReactTooltip delayHide={1000} />`
59-
delayShow | data-delay-show | Number | | `<p data-tip="tooltip" data-delay-show='1000'></p>` or `<ReactTooltip delayShow={1000} />`
59+
delayHide | data-delay-hide | Number | | `<p data-tip="tooltip" data-delay-hide='1000'></p>` or `<ReactTooltip delayHide={1000} />`
60+
delayShow | data-delay-show | Number | | `<p data-tip="tooltip" data-delay-show='1000'></p>` or `<ReactTooltip delayShow={1000} />`
6061
border | data-border | Bool | true, false | Add one pixel white border
6162

6263
### Using react component as tooltip

‎dist/react-tooltip.js

+15-10
Original file line numberDiff line numberDiff line change
@@ -100,7 +100,8 @@ var ReactTooltip = function (_Component) {
100100
html: false,
101101
delayHide: 0,
102102
delayShow: 0,
103-
event: props.event || null
103+
event: props.event || null,
104+
isCapture: props.isCapture || false
104105
};
105106
_this.delayShowLoop = null;
106107
return _this;
@@ -264,16 +265,24 @@ var ReactTooltip = function (_Component) {
264265
}, {
265266
key: 'checkStatus',
266267
value: function checkStatus(e) {
267-
if (this.props.eventPropagationMode === 'bubble') {
268-
e.stopPropagation();
268+
var show = this.state.show;
269+
270+
var isCapture = undefined;
271+
272+
if (e.currentTarget.getAttribute('data-iscapture')) {
273+
isCapture = e.currentTarget.getAttribute('data-iscapture') === 'true';
274+
} else {
275+
isCapture = this.state.isCapture;
269276
}
270-
if (this.state.show && e.currentTarget.getAttribute('currentItem') === 'true') {
277+
278+
if (!isCapture) e.stopPropagation();
279+
if (show && e.currentTarget.getAttribute('currentItem') === 'true') {
271280
this.hideTooltip(e);
272281
} else {
273282
e.currentTarget.setAttribute('currentItem', 'true');
274283
/* when click other place, the tooltip should be removed */
275284
window.removeEventListener('click', this.bindClickListener);
276-
window.addEventListener('click', this.bindClickListener, this.props.eventPropagationMode === 'capture');
285+
window.addEventListener('click', this.bindClickListener, isCapture);
277286

278287
this.showTooltip(e);
279288
this.setUntargetItems(e.currentTarget);
@@ -746,11 +755,7 @@ ReactTooltip.propTypes = {
746755
delayShow: _react.PropTypes.number,
747756
event: _react.PropTypes.any,
748757
watchWindow: _react.PropTypes.bool,
749-
eventPropagationMode: _react.PropTypes.oneOf(['bubble', 'capture'])
750-
};
751-
752-
ReactTooltip.defaultProps = {
753-
eventPropagationMode: 'bubble'
758+
isCapture: _react.PropTypes.bool
754759
};
755760

756761
/* export default not fit for standalone, it will exports {default:...} */

‎dist/react-tooltip.min.js

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎example/src/index.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,7 @@ const Test = React.createClass({
4747
<h4 className='title'>React Tooltip</h4>
4848
<div className='demonstration'>
4949
<a data-for='main' data-tip="Hello<br />multiline<br />tooltip">
50-
◕‿◕
50+
◕‿‿◕
5151
</a>
5252
</div>
5353
<div className='control-panel'>

‎package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "react-tooltip",
3-
"version": "1.2.1",
3+
"version": "2.0.0",
44
"description": "react tooltip component",
55
"main": "index.js",
66
"scripts": {

‎src/index.js

+14-10
Original file line numberDiff line numberDiff line change
@@ -67,7 +67,8 @@ class ReactTooltip extends Component {
6767
html: false,
6868
delayHide: 0,
6969
delayShow: 0,
70-
event: props.event || null
70+
event: props.event || null,
71+
isCapture: props.isCapture || false
7172
}
7273
this.delayShowLoop = null
7374
}
@@ -195,16 +196,23 @@ class ReactTooltip extends Component {
195196
* Used in customer event
196197
*/
197198
checkStatus (e) {
198-
if (this.props.eventPropagationMode === 'bubble') {
199-
e.stopPropagation()
199+
const {show} = this.state
200+
let isCapture
201+
202+
if (e.currentTarget.getAttribute('data-iscapture')) {
203+
isCapture = e.currentTarget.getAttribute('data-iscapture') === 'true'
204+
} else {
205+
isCapture = this.state.isCapture
200206
}
201-
if (this.state.show && e.currentTarget.getAttribute('currentItem') === 'true') {
207+
208+
if (!isCapture) e.stopPropagation()
209+
if (show && e.currentTarget.getAttribute('currentItem') === 'true') {
202210
this.hideTooltip(e)
203211
} else {
204212
e.currentTarget.setAttribute('currentItem', 'true')
205213
/* when click other place, the tooltip should be removed */
206214
window.removeEventListener('click', this.bindClickListener)
207-
window.addEventListener('click', this.bindClickListener, this.props.eventPropagationMode === 'capture')
215+
window.addEventListener('click', this.bindClickListener, isCapture)
208216

209217
this.showTooltip(e)
210218
this.setUntargetItems(e.currentTarget)
@@ -638,11 +646,7 @@ ReactTooltip.propTypes = {
638646
delayShow: PropTypes.number,
639647
event: PropTypes.any,
640648
watchWindow: PropTypes.bool,
641-
eventPropagationMode: PropTypes.oneOf(['bubble', 'capture'])
642-
}
643-
644-
ReactTooltip.defaultProps = {
645-
eventPropagationMode: 'bubble'
649+
isCapture: PropTypes.bool
646650
}
647651

648652
/* export default not fit for standalone, it will exports {default:...} */

‎standalone/react-tooltip.js

+15-10
Original file line numberDiff line numberDiff line change
@@ -147,7 +147,8 @@ var ReactTooltip = function (_Component) {
147147
html: false,
148148
delayHide: 0,
149149
delayShow: 0,
150-
event: props.event || null
150+
event: props.event || null,
151+
isCapture: props.isCapture || false
151152
};
152153
_this.delayShowLoop = null;
153154
return _this;
@@ -311,16 +312,24 @@ var ReactTooltip = function (_Component) {
311312
}, {
312313
key: 'checkStatus',
313314
value: function checkStatus(e) {
314-
if (this.props.eventPropagationMode === 'bubble') {
315-
e.stopPropagation();
315+
var show = this.state.show;
316+
317+
var isCapture = undefined;
318+
319+
if (e.currentTarget.getAttribute('data-iscapture')) {
320+
isCapture = e.currentTarget.getAttribute('data-iscapture') === 'true';
321+
} else {
322+
isCapture = this.state.isCapture;
316323
}
317-
if (this.state.show && e.currentTarget.getAttribute('currentItem') === 'true') {
324+
325+
if (!isCapture) e.stopPropagation();
326+
if (show && e.currentTarget.getAttribute('currentItem') === 'true') {
318327
this.hideTooltip(e);
319328
} else {
320329
e.currentTarget.setAttribute('currentItem', 'true');
321330
/* when click other place, the tooltip should be removed */
322331
window.removeEventListener('click', this.bindClickListener);
323-
window.addEventListener('click', this.bindClickListener, this.props.eventPropagationMode === 'capture');
332+
window.addEventListener('click', this.bindClickListener, isCapture);
324333

325334
this.showTooltip(e);
326335
this.setUntargetItems(e.currentTarget);
@@ -793,11 +802,7 @@ ReactTooltip.propTypes = {
793802
delayShow: _react.PropTypes.number,
794803
event: _react.PropTypes.any,
795804
watchWindow: _react.PropTypes.bool,
796-
eventPropagationMode: _react.PropTypes.oneOf(['bubble', 'capture'])
797-
};
798-
799-
ReactTooltip.defaultProps = {
800-
eventPropagationMode: 'bubble'
805+
isCapture: _react.PropTypes.bool
801806
};
802807

803808
/* export default not fit for standalone, it will exports {default:...} */

‎standalone/react-tooltip.min.js

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)