I am looking to create a popover similar to the image linked below. When the icon is clicked, I want the popover to display with the same user interface. https://i.sstatic.net/yvKjF.png
Here is the code snippet that I have been using:
{showPopOver && (
<Popover
open={showPopOver}
onClose={(e) => {
if (showPopOver) {
e.stopPropagation()
toggleModal()
}
}}
anchorEl={imageRef?.current}
anchorOrigin={{
vertical: `top`,
horizontal: `center`,
}}
transformOrigin={{
vertical: `top`,
horizontal: `center`,
}}
PaperProps={{
style: { width: "400px", height: "300px" },
}}
><POPOVER CONTENTS........>
</popover>
)}
The issue I am facing is that the popover overlaps the icon when it appears.
Can anyone provide guidance on how to position the popover above the icon with the v(callout)?
Any suggestions or solutions to this problem would be greatly appreciated.