Menu
There is playground example on Popper component page of material-ui. To add arrow they use arrowRef. Please explain me where do they get it from?
694
There is playground example on Popper component page of material-ui. To add arrow they use arrowRef.
Material UI for React has this component available for us, and it is simple and very easy to integrate. For perfect positioning, it uses 3rd party library which is Popper.
A Popper can be used to display some content on top of another. It's an alternative to react-popper. Some important features of the Popper component: 🕷 Popper relies on the 3rd party library (Popper.js) for perfect positioning. 💄 It's an alternative API to react-popper.
Step 1: Create a React application using the following command. Step 2: After creating your project folder i.e. foldername, move to it using the following command. Step 3: After creating the ReactJS application, Install the material-ui modules using the following command.
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.
183
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
37
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
