Add "tooltipShowOnClick" to Tooltip component

components/tooltip/Tooltip.js

@@ -19,6 +19,7 @@ const defaults = {
   className: '',
   delay: 0,
   hideOnClick: true,
+  showOnClick: false,
   position: POSITION.VERTICAL,
   theme: {}
 };
@@ -28,6 +29,7 @@ const tooltipFactory = (options = {}) => {
     className: defaultClassName,
     delay: defaultDelay,
     hideOnClick: defaultHideOnClick,
+    showOnClick: defaultShowOnClick,
     position: defaultPosition,
     theme: defaultTheme
   } = {...defaults, ...options};
@@ -51,14 +53,16 @@ const tooltipFactory = (options = {}) => {
         ]),
         tooltipDelay: PropTypes.number,
         tooltipHideOnClick: PropTypes.bool,
-        tooltipPosition: PropTypes.oneOf(Object.keys(POSITION).map(key => POSITION[key]))
+        tooltipPosition: PropTypes.oneOf(Object.keys(POSITION).map(key => POSITION[key])),
+        tooltipShowOnClick: PropTypes.bool
       };
 
       static defaultProps = {
         className: defaultClassName,
         tooltipDelay: defaultDelay,
         tooltipHideOnClick: defaultHideOnClick,
-        tooltipPosition: defaultPosition
+        tooltipPosition: defaultPosition,
+        tooltipShowOnClick: defaultShowOnClick
       };
 
       state = {
@@ -158,7 +162,14 @@ const tooltipFactory = (options = {}) => {
       };
 
       handleClick = (event) => {
-        if (this.props.tooltipHideOnClick) this.deactivate();
+        if (this.props.tooltipHideOnClick && this.state.active) {
+            this.deactivate();
+        }
+
+        if (this.props.tooltipShowOnClick && !this.state.active) {
+          this.activate(this.calculatePosition(event.target));
+        }
+
         if (this.props.onClick) this.props.onClick(event);
       };
 
@@ -173,6 +184,7 @@ const tooltipFactory = (options = {}) => {
           tooltipDelay,       //eslint-disable-line no-unused-vars
           tooltipHideOnClick, //eslint-disable-line no-unused-vars
           tooltipPosition,    //eslint-disable-line no-unused-vars
+          tooltipShowOnClick, //eslint-disable-line no-unused-vars
           ...other
         } = this.props;
 

spec/components/tooltip.js

@@ -24,6 +24,14 @@ const TooltipTest = () => (
     />
     <TooltipInput tooltip='lorem ipsum...' />
     <p>Lorem ipsum dolor sit amet, <TooltipStrong tooltip='This is a auto show tooltip'>consectetur</TooltipStrong> adipiscing elit.</p>
+    <p>
+      Click this next word to show and hide on click:
+      {' '}
+      <TooltipStrong tooltip='This is a auto show tooltip' tooltipShowOnClick>
+        oh hai
+      </TooltipStrong>
+      {' '}. This is useful for mobile!
+    </p>
   </section>
 );