Tooltip using a parent with relative position

components/button/style.scss

@@ -11,7 +11,6 @@
   color: $button-default-text-color;
   text-align: center;
   text-decoration: none;
-  overflow: hidden;
   white-space: nowrap;
   cursor: pointer;
   border: 0;

components/tooltip/index.jsx

@@ -1,6 +1,5 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import Overlay from '../overlay';
 import style from './style';
 
 class Tooltip extends React.Component {
@@ -19,23 +18,24 @@ class Tooltip extends React.Component {
   };
 
   componentDidMount = () => {
-    const node = ReactDOM.findDOMNode(this.refs.tooltip);
-    const parent = ReactDOM.findDOMNode(this).parentNode;
+    const node = ReactDOM.findDOMNode(this);
+    const parent = node.parentNode;
 
-    if (parent) {
-      parent.onmouseover = () => {
-        const parentStyle = parent.currentStyle || window.getComputedStyle(parent);
-        const offset = parseFloat(parentStyle['margin-bottom']) + parseFloat(parentStyle['padding-bottom']);
-        const position = parent.getBoundingClientRect();
-
-        node.style.top = `${position.top + position.height - offset}px`;
-        node.style.left = `${position.left + parseInt((position.width / 2) - (node.offsetWidth / 2))}px`;
-        if (!this.state.active) this.setState({ active: true});
-      };
-      parent.onmouseout = () => {
-        if (this.state.active) this.setState({ active: false});
-      };
+    if (parent.style.position !== 'relative' && parent.style.position !== 'absolute'){
+      parent.style.position = 'relative';
     }
+    parent.onmouseover = () => {
+      const parentStyle = parent.currentStyle || window.getComputedStyle(parent);
+      const offset = parseFloat(parentStyle['margin-bottom']) + parseFloat(parentStyle['padding-bottom']);
+      const position = parent.getBoundingClientRect();
+
+      node.style.top = `${position.height - offset}px`;
+      node.style.left = `${parseInt((position.width / 2) - (node.offsetWidth / 2))}px`;
+      if (!this.state.active) this.setState({ active: true});
+    };
+    parent.onmouseout = () => {
+      if (this.state.active) this.setState({ active: false});
+    };
   };
 
   render () {
@@ -44,11 +44,9 @@ class Tooltip extends React.Component {
     if (this.state.active) className += ` ${style.active}`;
 
     return (
-      <Overlay active={this.state.active} opacity={0}>
-        <span ref='tooltip' data-react-toolbox='tooltip' className={className}>
-          {this.props.label}
-        </span>
-      </Overlay>
+      <span data-react-toolbox='tooltip' className={className}>
+        {this.props.label}
+      </span>
     );
   }
 }

components/tooltip/style.scss

@@ -3,13 +3,12 @@
 @import "./config";
 
 .root {
-  position: fixed;
+  position: absolute;
   z-index: $z-index-higher;
-  display: inline-block;
+  display: block;
   max-width: $tooltip-max-width;
   padding: $tooltip-padding;
   margin: $tooltip-margin 0;
-  font-size: $font-size-tiny;
   font-size: $tooltip-font-size;
   font-weight: $font-weight-bold;
   line-height: $font-size-small;