twitter-bootstrapreactjstooltiptwitter-bootstrap-tooltip

React Bootstrap hide tooltip


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>
}

Solution

  • 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.