Merge pull request #1023 from Zequez/tooltip-fixes

Tooltip fixes

components/tooltip/Tooltip.js

@@ -152,7 +152,7 @@ const tooltipFactory = (options = {}) => {
       };
 
       handleMouseEnter = (event) => {
-        this.activate(this.calculatePosition(event.target));
+        this.activate(this.calculatePosition(event.currentTarget));
         if (this.props.onMouseEnter) this.props.onMouseEnter(event);
       };
 
@@ -167,7 +167,7 @@ const tooltipFactory = (options = {}) => {
         }
 
         if (this.props.tooltipShowOnClick && !this.state.active) {
-          this.activate(this.calculatePosition(event.target));
+          this.activate(this.calculatePosition(event.currentTarget));
         }
 
         if (this.props.onClick) this.props.onClick(event);
@@ -193,6 +193,8 @@ const tooltipFactory = (options = {}) => {
           [theme[positionClass]]: theme[positionClass]
         });
 
+        const isNative = typeof ComposedComponent === 'string';
+
         return (
           <ComposedComponent
             {...other}
@@ -200,7 +202,7 @@ const tooltipFactory = (options = {}) => {
             onClick={this.handleClick}
             onMouseEnter={this.handleMouseEnter}
             onMouseLeave={this.handleMouseLeave}
-            theme={theme}
+            {...isNative ? {} : {theme}}
           >
             {children ? children : null}
             {visible && (

spec/components/tooltip.js

@@ -2,6 +2,8 @@ import React from 'react';
 import Button from '../../components/button';
 import Input from '../../components/input';
 import Tooltip from '../../components/tooltip';
+import Chip from '../../components/chip';
+import Avatar from '../../components/avatar';
 
 const TooltipButton = Tooltip(Button);
 const TooltipInput = Tooltip(Input);
@@ -9,6 +11,8 @@ const TooltipStrong = Tooltip(({children, ...other}) => {
   delete other.theme;
   return <strong {...other}>{children}</strong>;
 });
+const TooltipStrongDirect = Tooltip('strong');
+const ChipTooltip = Tooltip(Chip);
 
 const TooltipTest = () => (
   <section>
@@ -22,14 +26,18 @@ const TooltipTest = () => (
       floating
       tooltip={<div><p>An example with</p><p>Multiline!</p></div>}
     />
+    <ChipTooltip tooltip='Dolor sit amet' tooltipPosition='top'>
+      <Avatar icon='home'/>
+      <span>Tooltip in a chip</span>
+    </ChipTooltip>
     <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>
+      <TooltipStrongDirect tooltip='This is a auto show tooltip' tooltipShowOnClick>
         oh hai
-      </TooltipStrong>
+      </TooltipStrongDirect>
       {' '}. This is useful for mobile!
     </p>
   </section>