Transform 3d

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