New attribute isCapture, deprecate eventPropagationMode

README.md

@@ -51,12 +51,13 @@ Check example:  [React-tooltip Test](http://wwayne.com/react-tooltip)
     type	|   data-type  |  String  |  success, warning, error, info, light | tooltip's color theme
     effect	|   data-effect  |  String  |  float, solid | either float or pinned
     event |   data-event  |  String  |  e.g. click | custom event to trigger tooltip
-    offset	|   data-offset  |  Object  |  top, right, bottom, left | data-offset="{'top': 10, 'left': 10}" for specific and offset={{top: 10, left: 10}} for global
+    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} />` | 
+    offset	|   data-offset  |  Object  |  top, right, bottom, left | `data-offset="{'top': 10, 'left': 10}"` for specific and `offset={{top: 10, left: 10}}` for global
    multiline	|   data-multiline  |  Bool  |  true, false | support `<br>`, `<br />` to make multiline
   class	|   data-class  |  String  |  your custom class | extra custom class, can use !important to cover react-tooltip's default class
       html	|   data-html  |  Bool  |  true, false  |  `<p data-tip="<p>HTML tooltip</p>" data-html={true}></p>` or `<ReactTooltip html={true} />`
-   delayHide	|   data-delay-hide  |  Number  |   |    `<p data-tip="tooltip" data-delay-hide='1000'></p>` or `<ReactTooltip delayHide={1000} />`
-    delayShow	|   data-delay-show  |  Number  |   |    `<p data-tip="tooltip" data-delay-show='1000'></p>` or `<ReactTooltip delayShow={1000} />`
+   delayHide	|   data-delay-hide  |  Number  |   | `<p data-tip="tooltip" data-delay-hide='1000'></p>` or `<ReactTooltip delayHide={1000} />`
+    delayShow	|   data-delay-show  |  Number  |   | `<p data-tip="tooltip" data-delay-show='1000'></p>` or `<ReactTooltip delayShow={1000} />`
    border  |   data-border  |  Bool  |  true, false | Add one pixel white border
 
 ### Using react component as tooltip

dist/react-tooltip.js

@@ -100,7 +100,8 @@ var ReactTooltip = function (_Component) {
       html: false,
       delayHide: 0,
       delayShow: 0,
-      event: props.event || null
+      event: props.event || null,
+      isCapture: props.isCapture || false
     };
     _this.delayShowLoop = null;
     return _this;
@@ -264,16 +265,24 @@ var ReactTooltip = function (_Component) {
   }, {
     key: 'checkStatus',
     value: function checkStatus(e) {
-      if (this.props.eventPropagationMode === 'bubble') {
-        e.stopPropagation();
+      var show = this.state.show;
+
+      var isCapture = undefined;
+
+      if (e.currentTarget.getAttribute('data-iscapture')) {
+        isCapture = e.currentTarget.getAttribute('data-iscapture') === 'true';
+      } else {
+        isCapture = this.state.isCapture;
       }
-      if (this.state.show && e.currentTarget.getAttribute('currentItem') === 'true') {
+
+      if (!isCapture) e.stopPropagation();
+      if (show && e.currentTarget.getAttribute('currentItem') === 'true') {
         this.hideTooltip(e);
       } else {
         e.currentTarget.setAttribute('currentItem', 'true');
         /* when click other place, the tooltip should be removed */
         window.removeEventListener('click', this.bindClickListener);
-        window.addEventListener('click', this.bindClickListener, this.props.eventPropagationMode === 'capture');
+        window.addEventListener('click', this.bindClickListener, isCapture);
 
         this.showTooltip(e);
         this.setUntargetItems(e.currentTarget);
@@ -746,11 +755,7 @@ ReactTooltip.propTypes = {
   delayShow: _react.PropTypes.number,
   event: _react.PropTypes.any,
   watchWindow: _react.PropTypes.bool,
-  eventPropagationMode: _react.PropTypes.oneOf(['bubble', 'capture'])
-};
-
-ReactTooltip.defaultProps = {
-  eventPropagationMode: 'bubble'
+  isCapture: _react.PropTypes.bool
 };
 
 /* export default not fit for standalone, it will exports {default:...} */

example/src/index.js

@@ -47,7 +47,7 @@ const Test = React.createClass({
           <h4 className='title'>React Tooltip</h4>
           <div className='demonstration'>
             <a data-for='main' data-tip="Hello<br />multiline<br />tooltip">
-               ◕‿◕
+               ◕‿‿◕
             </a>
           </div>
           <div className='control-panel'>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-tooltip",
-  "version": "1.2.1",
+  "version": "2.0.0",
   "description": "react tooltip component",
   "main": "index.js",
   "scripts": {

src/index.js

@@ -67,7 +67,8 @@ class ReactTooltip extends Component {
       html: false,
       delayHide: 0,
       delayShow: 0,
-      event: props.event || null
+      event: props.event || null,
+      isCapture: props.isCapture || false
     }
     this.delayShowLoop = null
   }
@@ -195,16 +196,23 @@ class ReactTooltip extends Component {
    * Used in customer event
    */
   checkStatus (e) {
-    if (this.props.eventPropagationMode === 'bubble') {
-      e.stopPropagation()
+    const {show} = this.state
+    let isCapture
+
+    if (e.currentTarget.getAttribute('data-iscapture')) {
+      isCapture = e.currentTarget.getAttribute('data-iscapture') === 'true'
+    } else {
+      isCapture = this.state.isCapture
     }
-    if (this.state.show && e.currentTarget.getAttribute('currentItem') === 'true') {
+
+    if (!isCapture) e.stopPropagation()
+    if (show && e.currentTarget.getAttribute('currentItem') === 'true') {
       this.hideTooltip(e)
     } else {
       e.currentTarget.setAttribute('currentItem', 'true')
       /* when click other place, the tooltip should be removed */
       window.removeEventListener('click', this.bindClickListener)
-      window.addEventListener('click', this.bindClickListener, this.props.eventPropagationMode === 'capture')
+      window.addEventListener('click', this.bindClickListener, isCapture)
 
       this.showTooltip(e)
       this.setUntargetItems(e.currentTarget)
@@ -638,11 +646,7 @@ ReactTooltip.propTypes = {
   delayShow: PropTypes.number,
   event: PropTypes.any,
   watchWindow: PropTypes.bool,
-  eventPropagationMode: PropTypes.oneOf(['bubble', 'capture'])
-}
-
-ReactTooltip.defaultProps = {
-  eventPropagationMode: 'bubble'
+  isCapture: PropTypes.bool
 }
 
 /* export default not fit for standalone, it will exports {default:...} */

standalone/react-tooltip.js

@@ -147,7 +147,8 @@ var ReactTooltip = function (_Component) {
       html: false,
       delayHide: 0,
       delayShow: 0,
-      event: props.event || null
+      event: props.event || null,
+      isCapture: props.isCapture || false
     };
     _this.delayShowLoop = null;
     return _this;
@@ -311,16 +312,24 @@ var ReactTooltip = function (_Component) {
   }, {
     key: 'checkStatus',
     value: function checkStatus(e) {
-      if (this.props.eventPropagationMode === 'bubble') {
-        e.stopPropagation();
+      var show = this.state.show;
+
+      var isCapture = undefined;
+
+      if (e.currentTarget.getAttribute('data-iscapture')) {
+        isCapture = e.currentTarget.getAttribute('data-iscapture') === 'true';
+      } else {
+        isCapture = this.state.isCapture;
       }
-      if (this.state.show && e.currentTarget.getAttribute('currentItem') === 'true') {
+
+      if (!isCapture) e.stopPropagation();
+      if (show && e.currentTarget.getAttribute('currentItem') === 'true') {
         this.hideTooltip(e);
       } else {
         e.currentTarget.setAttribute('currentItem', 'true');
         /* when click other place, the tooltip should be removed */
         window.removeEventListener('click', this.bindClickListener);
-        window.addEventListener('click', this.bindClickListener, this.props.eventPropagationMode === 'capture');
+        window.addEventListener('click', this.bindClickListener, isCapture);
 
         this.showTooltip(e);
         this.setUntargetItems(e.currentTarget);
@@ -793,11 +802,7 @@ ReactTooltip.propTypes = {
   delayShow: _react.PropTypes.number,
   event: _react.PropTypes.any,
   watchWindow: _react.PropTypes.bool,
-  eventPropagationMode: _react.PropTypes.oneOf(['bubble', 'capture'])
-};
-
-ReactTooltip.defaultProps = {
-  eventPropagationMode: 'bubble'
+  isCapture: _react.PropTypes.bool
 };
 
 /* export default not fit for standalone, it will exports {default:...} */