Fix onHide in Menu, allow tooltips on focus

components/menu/Menu.js

@@ -66,6 +66,12 @@ const factory = (MenuItem) => {
           : this.props.position;
         this.setState({ position, width, height });
       });
+      if (this.state.active) {
+        events.addEventsToDocument({
+          click: this.handleDocumentClick,
+          touchstart: this.handleDocumentClick,
+        });
+      }
     }
 
     componentWillReceiveProps(nextProps) {

components/tooltip/Tooltip.js

@@ -56,6 +56,7 @@ const tooltipFactory = (options = {}) => {
         ]),
         tooltipDelay: PropTypes.number,
         tooltipHideOnClick: PropTypes.bool,
+        tooltipOnFocus: PropTypes.bool,
         tooltipPosition: PropTypes.oneOf(Object.keys(POSITION).map(key => POSITION[key])),
         tooltipShowOnClick: PropTypes.bool,
       };
@@ -215,6 +216,7 @@ const tooltipFactory = (options = {}) => {
           onMouseEnter,       // eslint-disable-line no-unused-vars
           onMouseLeave,       // eslint-disable-line no-unused-vars
           tooltip,
+          tooltipOnFocus,     // eslint-disable-line no-unused-vars
           tooltipDelay,       // eslint-disable-line no-unused-vars
           tooltipHideOnClick, // eslint-disable-line no-unused-vars
           tooltipPosition,    // eslint-disable-line no-unused-vars
@@ -231,10 +233,16 @@ const tooltipFactory = (options = {}) => {
           ...other,
           className,
           onClick: this.handleClick,
-          onMouseEnter: this.handleMouseEnter,
-          onMouseLeave: this.handleMouseLeave,
         };
 
+        if (tooltipOnFocus) {
+          childProps.onFocus = this.handleMouseEnter;
+          childProps.onBlur = this.handleMouseLeave;
+        } else {
+          childProps.onMouseEnter = this.handleMouseEnter;
+          childProps.onMouseLeave = this.handleMouseLeave;
+        }
+
         const shouldPass = typeof ComposedComponent !== 'string' && defaultPassthrough;
         const finalProps = shouldPass ? { ...childProps, theme } : childProps;
 

components/tooltip/config.css

@@ -1,10 +1,10 @@
 :root {
   --tooltip-background: color(rgb(97, 97, 97) a(90%));
   --tooltip-margin: calc(0.5 * var(--unit));
-  --tooltip-border-radius: calc(0.2 * var(--unit));
+  --tooltip-border-radius: calc(0.5 * var(--unit));
   --tooltip-color: var(--color-white);
-  --tooltip-font-size: var(--unit);
+  --tooltip-font-size: calc(1.5 * var(--unit));
-  --tooltip-max-width: calc(17 * var(--unit));
+  --tooltip-max-width: calc(35 * var(--unit));
-  --tooltip-padding: calc(0.8 * var(--unit));
+  --tooltip-padding: calc(1.2 * var(--unit));
   --tooltip-animation-duration: 200ms;
 }

components/tooltip/theme.css

@@ -7,7 +7,7 @@
   font-family: var(--preferred-font);
   font-size: var(--tooltip-font-size);
   font-weight: var(--font-weight-bold);
-  line-height: var(--font-size-small);
+  line-height: calc(1.1 * var(--tooltip-font-size));
   max-width: var(--tooltip-max-width);
   padding: var(--tooltip-margin);
   pointer-events: none;

package.json

@@ -2,7 +2,7 @@
   "name": "react-toolbox",
   "description": "A set of React components implementing Google's Material Design specification with the power of CSS Modules.",
   "homepage": "http://www.react-toolbox.io",
-  "version": "2.0.0-beta.18",
+  "version": "2.0.0-beta.19",
   "main": "./lib",
   "module": "./components",
   "author": {