From cfaca9a5019a3da2585d14c52461e109c721e814 Mon Sep 17 00:00:00 2001
From: wwayne <wayne.wang0821@gmail.com>
Date: Thu, 14 Jul 2016 14:09:41 +0800
Subject: [PATCH 1/2] Update readme to introduce how to use tooltip with modal

---
 README.md | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/README.md b/README.md
index 9b09ffd58..dcfda077a 100644
--- a/README.md
+++ b/README.md
@@ -79,6 +79,14 @@ Check the example [React-tooltip Test](http://wwayne.com/react-tooltip)
 I suggest always put `<ReactTooltip />` in the Highest level or smart component of Redux, so you might need these static
 method to control tooltip's behaviour in some situations
 
+## Trouble Shooting
+#### Using tooltip within the modal (e.g. [react-modal](https://github.com/reactjs/react-modal))
+The component was designed to set a `<Reactooltip />` one place then use tooltip everywhere, but a lot of people stuck in using this component with modal, you can check the discussion [here](https://github.com/wwayne/react-tooltip/issues/130), the summarization of solving the problem is as following:
+
+1. Put `<Reactootlip />` out of the `<Modal>`
+2. Use `React.rebuild()` when opening the modal
+3. If your modal's z-index happens to higher than the tooltip, use the attribute `class` to custom your tooltip's z-index
+
 ## Article
 [How I insert sass into react component](https://medium.com/@wwayne_me/how-i-insert-sass-into-my-npm-react-component-b46b9811c226#.gi4hxu44a)
 

From d865519f917e9126dc9604a4508ff6090a55ca34 Mon Sep 17 00:00:00 2001
From: wwayne <wayne.wang0821@gmail.com>
Date: Thu, 14 Jul 2016 14:53:41 +0800
Subject: [PATCH 2/2] Add support when parent is under transform

---
 example/src/index.js     |  2 +-
 src/utils/getPosition.js | 27 ++++++++++++++++++++++-----
 2 files changed, 23 insertions(+), 6 deletions(-)

diff --git a/example/src/index.js b/example/src/index.js
index b5577879c..2a0ad19c2 100755
--- a/example/src/index.js
+++ b/example/src/index.js
@@ -91,7 +91,7 @@ const Test = React.createClass({
             <p className="sub-title">Use everything as tooltip</p>
 
             <div className="example-jsx">
-              <div className="side">
+              <div className="side"  style={{ transform: 'translate3d(5px, 5px, 5px)' }}>
                 <a data-tip data-for='happyFace'> d(`･∀･)b </a>
                 <ReactTooltip id='happyFace' type="error"><span>Show happy face</span></ReactTooltip>
               </div>
diff --git a/src/utils/getPosition.js b/src/utils/getPosition.js
index 0d88e4948..011f0cf60 100644
--- a/src/utils/getPosition.js
+++ b/src/utils/getPosition.js
@@ -24,6 +24,8 @@ export default function (e, target, node, place, effect, offset) {
   const windowWidth = window.innerWidth
   const windowHeight = window.innerHeight
 
+  const {parentTop, parentLeft} = getParent(target)
+
   // Get the edge offset of the tooltip
   const getTipOffsetLeft = (place) => {
     const offset_X = defaultOffset[place].l
@@ -153,8 +155,8 @@ export default function (e, target, node, place, effect, offset) {
   return {
     isNewState: false,
     position: {
-      left: getTipOffsetLeft(place),
-      top: getTipOffsetTop(place)
+      left: getTipOffsetLeft(place) - parentLeft,
+      top: getTipOffsetTop(place) - parentTop
     }
   }
 }
@@ -186,8 +188,9 @@ const getDefaultPosition = (effect, targetWidth, targetHeight, tipWidth, tipHeig
   let right
   let bottom
   let left
-  const disToMouse = 8
+  const disToMouse = 3
   const triangleHeight = 2
+  const cursorHeight = 12 // Optimize for float bottom only, cause the cursor will hide the tooltip
 
   if (effect === 'float') {
     top = {
@@ -199,8 +202,8 @@ const getDefaultPosition = (effect, targetWidth, targetHeight, tipWidth, tipHeig
     bottom = {
       l: -(tipWidth / 2),
       r: tipWidth / 2,
-      t: disToMouse,
-      b: tipHeight + disToMouse + triangleHeight
+      t: disToMouse + cursorHeight,
+      b: tipHeight + disToMouse + triangleHeight + cursorHeight
     }
     left = {
       l: -(tipWidth + disToMouse + triangleHeight),
@@ -266,3 +269,17 @@ const calculateOffset = (offset) => {
 
   return {extraOffset_X, extraOffset_Y}
 }
+
+// Get the offset of the parent elements
+const getParent = (currentTarget) => {
+  let currentParent = currentTarget.parentElement
+  while (currentParent) {
+    if (currentParent.style.transform.length > 0) break
+    currentParent = currentParent.parentElement
+  }
+
+  const parentTop = currentParent && currentParent.getBoundingClientRect().top || 0
+  const parentLeft = currentParent && currentParent.getBoundingClientRect().left || 0
+
+  return {parentTop, parentLeft}
+}