Merge pull request #473 from EndiM/feat/enable-pointer-events-by-clickable-prop

Feat(clickable-prop): add clickable prop to enable pointer events

Author: aronhelser

README.md

@@ -77,6 +77,7 @@ className	|   data-class  |  String  |   | extra custom class, can use !importan
  scrollHide | data-scroll-hide | Bool | true, false | Hide the tooltip when scrolling, default is true
  resizeHide | null | Bool | true, false | Hide the tooltip when resizing the window, default is true
  wrapper | null | String | div, span | Selecting the wrapper element of the react tooltip, default is div
+ clickable | null | Bool | true, false | Enables tooltip to respond to mouse (or touch) events, default is false
 
 ### Security Note
 

example/src/index.js

@@ -404,6 +404,27 @@ class Test extends React.Component {
                 " type={'light'}"}</p>
               </div>
             </pre>
+
+            <p>When <em>clickable</em> property is set to <em>true</em>, tooltip can respond to mouse (or touch) events.</p>
+            <p className="sub-title"></p>
+            <div className="example-jsx">
+              <div className="block" >
+                <a data-tip data-for='clickme' data-event='click'> (❂‿❂) </a>
+              </div>
+
+              <ReactTooltip id="clickme" place="right" effect="solid" clickable={true}>
+                <input type="text" placeholder="Type something..." />
+              </ReactTooltip>
+            </div>
+            <br />
+            <pre className='example-pre'>
+              <div>
+                <p>{"<a data-tip data-for='clickme' data-event='click'> (❂‿❂) </a>"}</p>
+                <p>{"<ReactTooltip id='clickme' place='right' effect='solid' clickable={true}>\n" +
+                  "<input type='text' placeholder='Type something...' /> \n" +
+                  "</ReactTooltip>"}</p>
+              </div>
+            </pre>
             </div>
 
         </section>

src/index.js

@@ -57,13 +57,15 @@ class ReactTooltip extends React.Component {
     disable: PropTypes.bool,
     scrollHide: PropTypes.bool,
     resizeHide: PropTypes.bool,
-    wrapper: PropTypes.string
+    wrapper: PropTypes.string,
+    clickable: PropTypes.bool
   };
 
   static defaultProps = {
     insecure: true,
     resizeHide: true,
-    wrapper: 'div'
+    wrapper: 'div',
+    clickable: false
   };
 
   static supportedWrappers = ['div', 'span'];
@@ -539,7 +541,8 @@ class ReactTooltip extends React.Component {
       {'type-error': this.state.type === 'error'},
       {'type-info': this.state.type === 'info'},
       {'type-light': this.state.type === 'light'},
-      {'allow_hover': this.props.delayUpdate}
+      {'allow_hover': this.props.delayUpdate},
+      {'allow_click': this.props.clickable}
     )
 
     let Wrapper = this.props.wrapper

src/index.scss

@@ -67,7 +67,8 @@
   top: -999em;
   visibility: hidden;
   z-index: 999;
-  &.allow_hover {
+  &.allow_hover,
+  &.allow_click {
     pointer-events:auto;
   }
   &:before,