React Bootstrap hide tooltip

Question

Is there a way to hide the OverlayTrigger/Tooltip element by default? eg. overlay={this.state.show ? <Tooltip>showing</Tooltip> : null} works but throws a warning on console:

The prop overlay is marked as required in OverlayTrigger, but its value is null

Would this be the only way?

{!this.state.show ? {component} :
 <OverlayTrigger ...>
   {component}
 </OverlayTrigger>
}

Answer 1

This worked for me, shows only when boolean is true.

<OverlayTrigger
  overlay={
    boolean ? (
      <Tooltip id={`tooltip`}>important message for user</Tooltip>
    ) : (
      <span></span>
    )
  }
>
{children}
</OverlayTrigger>