My first attempt at hiding a react-bootstrap tool tip was pretty naive. I wrapped it in a div.

1.png
Grabbed it directly from the DOM. And then made it’s display: none.

2.png

This worked. But it’s not the react way to do things. Instead we want to control the hiding of the element with a property, and then have the element display or hide itself on the state of that property.

So first add some state.

1.png

Then define an event handler to handle the state change.

2.png

Then hook it up in your constructor

3.png

Then define a style variable that will render itself depending on the state of your component. And then use it in your render.

4.png

The thing with remember with react is you never want to directly touch the DOM. Let react do that for you. Instead define states and properties, and manipulate them through handlers.

Here’s the whole solution using a react-bootstrap tooltip.

 

5.png

Thanks to Kelvin for his help and guidance in solving this.

Advertisements