Tooltip crops if renders in `Overflow: hidden` element

[wamujlb]

Hi. This is too big problem if you render tooltip inside an element which has prop - overflow: hidden.

[uxtx]

ran up against this as well - has anyone come up with a work around for this?

[wamujlb]

@uxtx , do you have some ideas how to fix it?

[Tarpsvo]

That's what overflow: hidden does. Either make the overflow visible or put the tooltip in a parent view. Or place it at the end of the body element using Portals.

[tonix-tuft]

You can also use this useful HOC which appends a React component to the body element:

https://github.com/jpgorman/react-append-to-body

[nmartinezb3]

This can be fixed this by placing an empty div in your body and using portals:

const tooltipContainer = document.getElementById("tooltip-container")

<div>
  <a data-tip data-for="my-tooltip">
    <Icon />
  </a>
  {ReactDOM.createPortal(
    <ReactTooltip
      id="my-tooltip"
      {...props}
    >
      Some tooltip content
    </ReactTooltip>,
    tooltipContainer
  )}
</div>