React Tooltip Library comparison

React Tooltip CodeSandbox

What React Tooltip library should I use?

React tooltips are a complicated component for a variety of reasons. A tooltip needs to know about the size of the hover element, the content of the tooltip, and even its position relative to the browser window to know where to position itself. Add in hover and delay to accurately show and hide the tooltip and you've introduced even more difficulty in implementation.

For this reason we recommend using a Tooltip library. Such libraries are react-tooltip and material-ui's Tooltip. In the above video you can see us demo both these components.

There is no clear winner for what the best Tooltip library is. The options are quite limiting and tricky to modify. In our test, we were easily able to add a box shadow on react-tooltip. However, Material UI did not let us add a box-shadow because the Tooltip arrow is done with borders which can't easily sit on top of a box-shadow.

On the other hand, Material UI has much more community support compared to react-tooltip which doesn't appear to be maintained.