How can I set the Overlay container property when using OverlayTrigger?

Question

I'm using the OverlayTrigger component to get hover behavior for tooltips, and therefore not using the Overlay component directly. The Overlay component has a container property that I'd like to use to remedy the tooltip getting cut off by its natural container element.

I've attempted to pass a popperConfig object, but that's not working. I've also tried adding a container attribute to the OverlayTrigger component.

<Container fluid className='flex-fill' ref={rowContainer}>
    ... 

    <OverlayTrigger delay={{show: 500}} overlay={renderUserTooltip}
                    popperConfig={{container: rowContainer}}>
        <FaUser/>
    </OverlayTrigger>

How can I set the container for the Overlay when the Overlay component isn't directly used?

Answer 1

React bootstrap doesn't have a container prop or something similar (I mean it has a target prop but as this part of the docs suggests, for the OverlayTrigger the type is null, so it doesn't accept values and I don't think you can trick it to accept (and I don't think it would be wise to try).

But a pretty nice example, that shows some sort of a workaround in my opinion, can also be find in the docs, under customizing-trigger-behavior.

Starting from that example, if you need your trigger to be totally separated from the container an option is to just wrap everything in a big container that receives ({ ref, ...triggerHandler }) and all is left is to give your container the ref, and the trigger to your FaUser component. So something like:

<OverlayTrigger
  placement="bottom"
  overlay={<Tooltip id="button-tooltip-2">Check out this avatar</Tooltip>}
>
  {({ containerRef, ...triggerHandler }) => (
    <Container fluid className='flex-fill' ref={containerRef}>
      ...
      <FaUser/>
    </Container>
  )}
</OverlayTrigger>

I also created a sandbox with a minimal reproducible example.