React-tooltip: Broken when use it with css transforms

[gugadev]

Good day. I notice a problem when using css transforms. I'm making a draggable component that uses css transforms to move around. After drag the component, the tooltip loses it's uniformity, it isn't shown correctly, some parts simply not seen. Look the picture:

The component is inside a <div id="albums"></div> element with body's width. The data-tip element is inside the header (the cog button).

<header
  className="head"
>
  <h3>{this.state.title}</h3>
  <button
    className="settings"
    onClick={this.toggleDrag.bind(this)}
    data-tip
    data-for="toggleDrag"
  >
    <img src={moveIcon} />
  </button>
  <Tooltip
    id="toggleDrag"
    place="right"
    type="dark" 
    effect="solid"
    countTransform={false}
  >
    <span>Toggle Drag</span>
  </Tooltip>
</header>

The container's css:

.portrait {
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.22),
     0 14px 56px rgba(0, 0, 0, 0.25);
  display: inline-block;
  overflow: hidden;
  position: relative;
  user-select: none;
  width: 100%;
}

And the header's css:

.head {
    background-color: rgba(0,0,0,.55);
    left: 0;
    padding: .8rem;
    position: absolute;
    text-align: center;
    top: 0;
    width: 100%;
    z-index: 2;

    & h3 {
      color: rgba(255,255,255,.85);
      font-family: 'Marvel', arial;
      font-size: 2rem;
      margin: 0;
      pointer-events: none;
      text-transform: uppercase;
    }

    & .settings {
      background-color: transparent;
      border: none;
      cursor: pointer;
      height: 20px;
      opacity: .5;
      position: absolute;
      right: 5px;
      top: 5px;
      transition: opacity .25s ease;
      width: 30px;

      & img {
        height: 100%;
        width: 100%;
      }
    }
  }

[atZhengda]

same here, while using react-draggable, the tooltip is not in correct position

[huumanoid]

For everyone who is experiencing issues with css3 transform and the tooltip:
Please, place <ReactTooltip> element outside of the transformed DOM element.
Example:

<div>
  <ReactTooltip id="my-tooltip"/>
  <div style={{ transform: 'whatever' }}>
    <span data-tip="my lovely tip" data-for="my-tooltip">Hover me!</span>
  </div>
</div>

Report

Incorrect position issue

To calculate tooltip's position, react-tooltip uses e.clientX and e.clientY properties of the MouseEvent.
Calculations looks like: tooltipElement.style.left = e.clientX + offset.

The problem is that e.clientX is given in the top level view port coordinates.
But tooltipElement.style.left expects the coordinates in it's own view port coordinate system.

So, it's required for tooltip's div view port to match the top level view port.

Clipped content issue

I've experienced this issue while using datagrid with overflow: hidden container. As far as I understand, the OP's situation is similar with my own. But it's seems to be impossible to break overflow: hidden inside of element with overflow set.

Solution

The easiest solution is to place tooltip's element outside of transformed element. In this case, browser handles all for us. I suppose, that we can make react-tooltip to work with CSS transform, for example, if we would properly handle CSS transform property. It means that we should implement CSS engine.

Existing solutions

I've checked some of them.
They can be divided in two classes:

1. They insert tooltip's element into place where it's required. And such solutions are broken.
2. They inject tooltip's element at the top level of DOM.

Perhaps we should implement something similar to the second point.