How does the ReactBootstrap OverlayTrigger container work?
I have a Popover inside the OverlayTrigger.
I define it as
const myOverlayTrigger = <ReactBootstrap.OverlayTrigger
placement='bottom' overlay={<ReactBootstrap.Tooltip>...</ReactBootstrap.Tooltip>}>
{myContent}
</ReactBootstrap.OverlayTrigger>;
Then I create it inside one of my elements:
<li>{myOverlayTrigger}</li>
I want to render the OverlayTrigger inside <li>
, but it renders inside the body as defined in the documentation. I am trying to use the container attribute to render it inside the parent <li>
.
I first tried to assign an ID <li>
and pass that ID as a string to container = ... (which is not the best way).
Second, I tried to create an additional element <span></span>
and make it inside
const c = <span></span>;
... container={c} ...
<li>{c} {myOverlayTrigger}</li>
Both approaches consistently give error not a dom element or react component
.
Obviously, assigning <li>...</li>
yourself as a container does not work either the way it was defined after the definition of myOverlayTrigger.
The question is: how to use it correctly?
source to share
ReactBootstrap.Overlay
recommended for the reason stated in the document.
The OverlayTrigger component is great for most use cases, but as a higher-level abstraction it might not have the flexibility needed to create more subtle or custom behaviors in Overlay components. For these cases, it can be useful to abandon the trigger and use the Overlay component directly.
In your case, the code below maps the component ReactBootstrap.Overlay
to a list element with a React attribute ref
.
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 on a click, the resulting HTML will 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>
source to share