Focus / Blur Events

[robertkraig]

Focus / Blur Events

[denisborovikov]

Hi, just use tooltip as a controlled component.

Here's a rough example of how you can implement required behavior https://codesandbox.io/s/mm3klvjjjx

Use tab to switch the focus between buttons. When you focus on the middle button, tooltip shows. When the button lost the focus, it hides.

You can use tooltipShown and onVisibilityChange to control the appearance of the tooltip from the outside. See README and controlled example.

[denisborovikov]

@robertkraig Here's quick rewrite with react class component https://codesandbox.io/s/jj3rm0nnmw

[robertkraig]

@mohsinulhaq that was exactly what I needed to see. Wish the docs where as clear as this example was.

[mohsinulhaq]

@robertkraig I hope the solution worked out for your use case :)

[robertkraig]

@mohsinulhaq absolutely. I had to 1st figure out though how the whole useState stuff worked so I understood your example. I think it's still a little too pre-mature for production-level usage of useState. I know it's been out for a minute, but most people don't have the right version of react yet. Only the bleeding edge people use it atm.

[denisborovikov]

@robertkraig I like hooks and use them in my everyday work. That's the reason why I used useState. Just because it was easier for me to prepare a quick proof of concept. You can use any state management as you want - setState, redux, recompose's useStateHandler, react-powerplug's container. It's totally up to you.

[mohsinulhaq]

@robertkraig please confirm if the solution sufficed so that we can close this issue