getParent requires the transform property to be set inline

[rispig]

Tooltip will be displayed poorly if one of the containing elements has a transform property set in the CSS and not inline when inside a fixed container.

I came across this when I was forced to add the tooltip dynamically inside a modal (hence the weird markup)

If was able to get <ReactTooltip /> higher up the component tree that would have solved it
but due to the nature of the code I can't.

Either way, I think that the test for the existence of a transform property should include searching the element css declaration, in case that's too much of an end case maybe add a known issue or something in the documentation :)

JSX

<div className="fixed overlay">
  <div className="abs content">
    <div className="container">
      <ReactTooltip />
      <div className="fixed tooltip-target" data-top="tooltip"></div>
    </div>
  </div>  
</div> 

CSS

.fixed {
  position: fixed;
}
.abs {
  position: absolute;
}
.overlay {
  height: 250px;
  width: 250px;
  border: 1px solid;
}
.content {
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}
.container {
  position: relative;
  height: 150px;
  width: 150px;
  border: 1px solid;
  top: 50%;
  left: 50%;
  transform:translate(-50%,-50%);
}

[wwayne]

This should be fixed in 3.1.5