React Bootstrap hide tooltip

4
votes

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>
}
2
twitter-bootstrapreactjstooltiptwitter-bootstrap-tooltip
You are closing your curly-braces too early. Try: overlay={this.state.show ? <Tooltip>showing</Tooltip> : null}. - Chris
@Chris minor typo. The corrected version still throws "The prop overlay is marked as required in OverlayTrigger, but its value is null" - Avery235
@Avery235: try an empty string instead of null - An Nguyen
@FiriceNguyen with '' it shows a tooltip with '', with nothing at all it shows Cannot read property 'props' of null at OverlayTrigger.render - Avery235
An empty string doesn't work, it still throws an error. - Kesarion

2 Answers

3
votes

The OverlayTrigger component must have a overlay prop passed. If you don't want the tooltip, you also don't want an overlay to trigger. Hence, you'd want to remove it if this.state.show is falsy.

{this.state.show 
  ? <OverlayTrigger overlay={<Tooltip>showing</Tooltip>}>
      <button>Click me!</button>
    </OverlayTrigger>
  : <button>Click me!</button>
}

Edit: Yes, the code in your update would be the way to do it.

2
votes

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>