How does ReactBootstrap OverlayTrigger container property works?

Question

I have a popover inside OverlayTrigger.

I define it as

const myOverlayTrigger = <ReactBootstrap.OverlayTrigger 
    placement='bottom' overlay={<ReactBootstrap.Tooltip>...</ReactBootstrap.Tooltip>}>
    {myContent}
  </ReactBootstrap.OverlayTrigger>;

Then I render it inside one of my elements like that:

<li>{myOverlayTrigger}</li>

I want to render OverlayTrigger itself inside <li> but it renders inside body, as defined in documentation. I'm trying to use container attribute to render it inside parent <li>.

First, I tried to assign ID to <li> and pass this ID as a string to container=... (which isn't a best way).

Second, I tried to create additional element <span></span> and render it inside

along with {myOverlayTrigger}. Also I pass it (assigned to variable) to container attribute

const c = <span></span>;
... container={c} ...
<li>{c} {myOverlayTrigger}</li>

Both approaches consistently gives an error not a dom element or react component.

Obviously assigning <li>...</li> itself as a container doesn't work either as it being defined after myOverlayTrigger is defined.

Question: how to use it right?

Answer 1

ReactBootstrap.Overlay is recommended for the reason listed in the document.

The OverlayTrigger component is great for most use cases, but as a higher level abstraction it can lack the flexibility needed to build more nuanced or custom behaviors into your Overlay components. For these cases it can be helpful to forgo the trigger and use the Overlay component directly.

For your case, the code below renders the ReactBootstrap.Overlay component into a list item with React ref attribute.

getInitialState() {
    return (
        show: false
    );
},
render() {
    return (
        <ul>
            <li ref="dest" onClick={ () => {
                this.setState( { show: !this.state.show } );
            }}>my contents</li>
            <ReactBootstrap.Overlay placement="bottom"
                show={ this.state.show } container={ this.refs.dest }>
                <ReactBootstrap.Tooltip>tooltip</ReactBootstrap.Tooltip>
            </ReactBootstrap.Overlay>
        </ul>
    );
}

When the tooltip is displayed by clicking, the resulting HTML would be

<ul data-reactid=".0.1.0.0.0.0.0.1.1.1.1:$3.1.1">
    <li data-reactid=".0.1.0.0.0.0.0.1.1.1.1:$3.1.1.0">
        contents
        <div>
            <div role="tooltip" class="fade in tooltip right" data-reactid=".3">
                <div class="tooltip-arrow" data-reactid=".3.0"></div>
                <div class="tooltip-inner" data-reactid=".3.1">My tooltip</div>
            </div>
        </div>
    </li>
    <span data-reactid=".0.1.0.0.0.0.0.1.1.1.1:$3.1.1.1">,</span>
    <noscript data-reactid=".0.1.0.0.0.0.0.1.1.1.1:$3.1.1.2"></noscript>
</ul>