allows Tooltip to open on hover (#487)

Author: jasonbasuil

spec/__snapshots__/Storyshots.test.js.snap

@@ -19711,6 +19711,52 @@ exports[`Storyshots Design System/Tooltip With Header 1`] = `
 </div>
 `;
 
+exports[`Storyshots Design System/Tooltip With Hover 1`] = `
+<div
+  style={
+    Object {
+      "padding": "1rem",
+    }
+  }
+>
+  <div
+    style={
+      Object {
+        "padding": "4rem",
+      }
+    }
+  >
+    <span
+      aria-hidden="true"
+      className="Tooltip__icon"
+      onClick={[Function]}
+      onKeyPress={[Function]}
+      onMouseEnter={[Function]}
+      onMouseLeave={[Function]}
+      tabIndex="0"
+    >
+      <svg
+        aria-hidden="true"
+        className="svg-inline--fa fa-question-circle fa-w-16 "
+        data-icon="question-circle"
+        data-prefix="fas"
+        focusable="false"
+        role="img"
+        style={Object {}}
+        viewBox="0 0 512 512"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M504 256c0 136.997-111.043 248-248 248S8 392.997 8 256C8 119.083 119.043 8 256 8s248 111.083 248 248zM262.655 90c-54.497 0-89.255 22.957-116.549 63.758-3.536 5.286-2.353 12.415 2.715 16.258l34.699 26.31c5.205 3.947 12.621 3.008 16.665-2.122 17.864-22.658 30.113-35.797 57.303-35.797 20.429 0 45.698 13.148 45.698 32.958 0 14.976-12.363 22.667-32.534 33.976C247.128 238.528 216 254.941 216 296v4c0 6.627 5.373 12 12 12h56c6.627 0 12-5.373 12-12v-1.333c0-28.462 83.186-29.647 83.186-106.667 0-58.002-60.165-102-116.531-102zM256 338c-25.365 0-46 20.635-46 46 0 25.364 20.635 46 46 46s46-20.636 46-46c0-25.365-20.635-46-46-46z"
+          fill="currentColor"
+          style={Object {}}
+        />
+      </svg>
+    </span>
+  </div>
+</div>
+`;
+
 exports[`Storyshots Design System/Tooltip With Html 1`] = `
 <div
   style={

src/Tooltip/Tooltip.jsx

@@ -48,7 +48,9 @@ class Tooltip extends Component {
     }
   };
 
-  handleToggleTooltip = (event) => {
+  handleToggleTooltipClick = (event) => {
+    if (this.props.withHover) return;
+
     event.preventDefault();
     this.clickOutsideListener = addClickOutsideListener(
       event.target.parentNode,
@@ -58,6 +60,10 @@ class Tooltip extends Component {
     this.setState((state) => ({ visible: !state.visible }), this.handleShow);
   };
 
+  handleToggleTooltipHover = () => {
+    this.setState((state) => ({ visible: !state.visible }), this.handleShow);
+  };
+
   render() {
     return (
       <Popper
@@ -74,8 +80,10 @@ class Tooltip extends Component {
           className={classNames('Tooltip__icon', this.props.iconClasses)}
           /* eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex */
           tabIndex="0"
-          onClick={this.handleToggleTooltip}
-          onKeyPress={this.handleToggleTooltip}
+          onClick={this.handleToggleTooltipClick}
+          onKeyPress={this.handleToggleTooltipClick}
+          onMouseEnter={this.props.withHover && this.handleToggleTooltipHover}
+          onMouseLeave={this.props.withHover && this.handleToggleTooltipHover}
         >
           <FontAwesomeIcon icon={this.props.icon} />
         </span>
@@ -92,6 +100,7 @@ Tooltip.propTypes = {
   strategy: PropTypes.string,
   text: PropTypes.oneOfType([PropTypes.string, PropTypes.node]).isRequired,
   theme: PropTypes.string,
+  withHover: PropTypes.bool,
   onShow: PropTypes.func,
 };
 
@@ -101,6 +110,7 @@ Tooltip.defaultProps = {
   header: undefined,
   strategy: undefined,
   theme: 'dark',
+  withHover: undefined,
   onShow: undefined,
 };
 

src/Tooltip/Tooltip.stories.jsx

@@ -70,6 +70,14 @@ export const GrayIcon = () => (
   />
 );
 
+export const WithHover = () => (
+  <Tooltip
+    placement={radios('Placement', ['right', 'top', 'bottom', 'left', 'auto'], 'right')}
+    text={text('Tooltip Text', 'Default Tooltip')}
+    withHover
+  />
+);
+
 const trackingEvent = {
   event: 'test tracking event',
   eventData: { userId: 1 },