Example of using arrow in Popper component of material-ui

You can find the source code of the Material UI Popper "Scroll Playgroud" example here: https://github.com/mui-org/material-ui/blob/4f2a07e140c954b478a6670c009c23a59ec3e2d4/docs/src/pages/components/popper/ScrollPlayground.js

As you can see, there is some extra styling that you will need to add to your app to display the arrow correctly, because it's not included in the Material UI library itself.

For anyone else that needs it, the OP is asking about Material-UI Poppers.

Dmitriy,

Think of React Refs as a variable that always references the element (if rendered) OUTSIDE of the DOM. React best practices are typically to stay out of the DOM if at all possible. There are of course exceptions to this, but it's the rule of thumb.

In this particular instance, it appears that they are creating an element elsewhere and referencing it using the ref so that it can be utilized by the Popper. I found an example of this here. It's a little hard to read through, but the jist is that he creates a span and styles it how he wants to be applied.

For others looking for a concrete, reusable component that is simple to use like Tooltip but has a more interactive nature like Popper or Popover you can lift and shift the RichTooltip component from the following sandbox I created - it's typescript too. Hope this helps the next person and hides the complexity of arrows for you.

https://codesandbox.io/s/popper-with-arrow-58jhe