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

You are closing your curly-braces too early. Try: `overlay={this.state.show ? showing : null}`. — Chris, Sep 07 '17 at 07:44
@Chris minor typo. The corrected version still throws "The prop `overlay` is marked as required in `OverlayTrigger`, but its value is `null`" — Avery235, Sep 07 '17 at 07:46
@FiriceNguyen with '' it shows a tooltip with `''`, with nothing at all it shows `Cannot read property 'props' of null at OverlayTrigger.render` — Avery235, Sep 07 '17 at 07:50

score 5 · Answer 1 · answered Feb 01 '21 at 19:56

5

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>

answered Feb 01 '21 at 19:56

Tom Adam

81
1
3

1

I believe this is preferable to the accepted solution. I'm not getting any errors, and this way you don't have to duplicate or make a special component for your button. Rather, you simply make the ToolTip conditionally render. Nice! – JB Wilson Oct 07 '22 at 15:57
thanks Tom Adam I agree with @JB Wilson, your answer is the better. While still not the "accepted" at least I could vote yours to the top. For editing I found it easier to find/replace "overlay={" to "overlay={!boolean ? : ". Normally, I try to reserve negative semantics for the "else", but in this case I had many overlays. I'll go back to refactor after I'm confident there are no ill side-effects – user2624395 Dec 05 '22 at 02:44

Chris · Accepted Answer · 2017-09-07T07:52:41.967

4

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.

edited Sep 07 '17 at 07:52

answered Sep 07 '17 at 07:47

Chris

57,622
19
111
137

2

This doesn't help when instead of a simple button you have some content you want to display, but don't have any tooltip for; you'd have to duplicate more than just a button with some text. It should be possible to have an empty overlay with react-bootstrap simply displaying the content without a tooltip. As a workaround, I had to add a class to hide the tooltip in the overlay when I have nothing to show, which is just plain silly. – Kesarion May 19 '19 at 18:18
1

This worked perfectly for me! I already have a component to abstract all the ugly 'OverlayTrigger' code into a neat `` wrapper, so adding this to that was a breeze! I threw a 'disabled' prop onto the , and used the 'this.props.children' in my abstracted component to replicate the "button" (or whatever else is being wrapped in the tooltip) neatly for the above code! – Fateh Khalsa Aug 31 '21 at 08:12
1

thank you, I first tried the solution below this but was getting nasty errors related to properties not have set values. This solution ended up resolving all the problems. – Dan Aug 09 '22 at 16:46

React Bootstrap hide tooltip

2 Answers2