Fixes #1171

components/font_icon/FontIcon.js

@@ -1,7 +1,7 @@
 import React, { PropTypes } from 'react';
 import classnames from 'classnames';
 
-const FontIcon = ({ alt, children, className, value, ...other}) => (
+const FontIcon = ({ alt, children, className, theme, value, ...other}) => ( // eslint-disable-line
   <span
     data-react-toolbox='font-icon'
     aria-label={alt}
@@ -17,6 +17,7 @@ FontIcon.propTypes = {
   alt: PropTypes.string,
   children: PropTypes.any,
   className: PropTypes.string,
+  theme: PropTypes.object,
   value: PropTypes.oneOfType([
     PropTypes.string,
     PropTypes.element

components/tooltip/Tooltip.js

@@ -19,6 +19,7 @@ const defaults = {
   className: '',
   delay: 0,
   hideOnClick: true,
+  passthrough: true,
   showOnClick: false,
   position: POSITION.VERTICAL,
   theme: {}
@@ -30,6 +31,7 @@ const tooltipFactory = (options = {}) => {
     delay: defaultDelay,
     hideOnClick: defaultHideOnClick,
     showOnClick: defaultShowOnClick,
+    passthrough: defaultPassthrough,
     position: defaultPosition,
     theme: defaultTheme
   } = {...defaults, ...options};
@@ -181,11 +183,14 @@ const tooltipFactory = (options = {}) => {
           children,
           className,
           theme,
+          onClick,            // eslint-disable-line no-unused-vars
+          onMouseEnter,       // eslint-disable-line no-unused-vars
+          onMouseLeave,       // eslint-disable-line no-unused-vars
           tooltip,
-          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
+          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;
 
@@ -194,26 +199,25 @@ const tooltipFactory = (options = {}) => {
           [theme[positionClass]]: theme[positionClass]
         });
 
-        const isNative = typeof ComposedComponent === 'string';
+        const childProps = {
+          ...other,
+          className,
+          onClick: this.handleClick,
+          onMouseEnter: this.handleMouseEnter,
+          onMouseLeave: this.handleMouseLeave
+        };
 
-        return (
-          <ComposedComponent
-            {...other}
-            className={className}
-            onClick={this.handleClick}
-            onMouseEnter={this.handleMouseEnter}
-            onMouseLeave={this.handleMouseLeave}
-            {...isNative ? {} : {theme}}
-          >
-            {children ? children : null}
-            {visible && (
-              <Portal>
-                <span ref="tooltip" className={_className} data-react-toolbox="tooltip" style={{top, left}}>
-                  <span className={theme.tooltipInner}>{tooltip}</span>
-                </span>
-              </Portal>
-            )}
-          </ComposedComponent>
+        const shouldPass = typeof ComposedComponent !== 'string' && defaultPassthrough;
+        const finalProps = shouldPass ? { ...childProps, theme } : childProps;
+
+        return React.createElement(ComposedComponent, finalProps, children,
+          visible && (
+            <Portal>
+              <span ref="tooltip" className={_className} data-react-toolbox="tooltip" style={{top, left}}>
+                <span className={theme.tooltipInner}>{tooltip}</span>
+              </span>
+            </Portal>
+          )
         );
       }
     }

spec/components/tooltip.js

@@ -1,10 +1,12 @@
 import React from 'react';
 import Button from '../../components/button';
 import Input from '../../components/input';
-import Tooltip from '../../components/tooltip';
+import FontIcon from '../../components/font_icon';
+import Tooltip, { tooltipFactory } from '../../components/tooltip';
 import Chip from '../../components/chip';
 import Avatar from '../../components/avatar';
 
+const TooltipFontIcon = tooltipFactory({ passthrough: false })(FontIcon);
 const TooltipButton = Tooltip(Button);
 const TooltipInput = Tooltip(Input);
 const TooltipStrong = Tooltip(({children, ...other}) => {
@@ -40,6 +42,7 @@ const TooltipTest = () => (
       </TooltipStrongDirect>
       {' '}. This is useful for mobile!
     </p>
+    <TooltipFontIcon value="code" tooltip="This is a test with FontIcon" />
   </section>
 );