Merge pull request #135 from wwayne/transform-3d

Transform 3d

Author: wwayne

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)
 

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>

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}
+}