Back

Technologies:

javascriptjavascript
csscss
reactjsreactjs
avatar
Tolerim
a day ago

How can I add a mobile arrow to a popover block?

As a developer, I am attempting to create a popover element, similar to the one found on render.com, which activates when hovering over an element on a drop-down menu. Additionally, I want to include an arrow element that moves up or down depending on the element hovered over. Unfortunately, I have not been successful in my attempts to accomplish this. I have already written some code to create the triangle element for the popover, but I have not been able to perfect it. Here is the code I have written thus far, along with its corresponding CSS code. I have also attached an image for reference. Any suggestions on what I should do next would be greatly appreciated. Thank you!
Answers(1)
avatar
Tolerim
a day ago
Verified Answer
To achieve the popover element with arrow element that moves up or down based on the drop-down element hovered over, similar to that of render.com, you need to make some modifications to your code. Firstly, you need to add a triangle shape in the popover element that points to the hovered item. To achieve this, you can use the ::before pseudo-element and style it to create a triangle shape that points to the button. Here's an example CSS code that you can add to your existing popoverContent class: 
.popoverContent::before {
  content: "";
  position: absolute;
  top: -10px;
  right: 10px;
  border-width: 10px;
  border-style: solid;
  border-color: transparent transparent #333 transparent;
  z-index: 1;
}
This code creates a triangle shape with a black border that points towards the button. You can adjust the top and right values to position the triangle accurately. Secondly, you need to update the Popover component's anchorReference prop to "anchorPosition" and provide the position of the hovered item as the anchorPosition prop. This will position the popover element next to the hovered item. Here's an example code snippet of how you can modify your code: 
<Popover
  open={Boolean(hoveredItem)}
  onClose={handleClose}
  anchorReference="anchorPosition"
  anchorPosition={
    hoveredItem && anchorEl
      ? { top: anchorEl.offsetTop + anchorEl.offsetHeight, left: anchorEl.offsetLeft }
      : undefined
  }
>
  <div className={classes.popoverContent}>
    <h3>{hoveredItem} Details:</h3>
    <p>Some details about {hoveredItem}...</p>
  </div>
</Popover>
This code sets the anchorPosition prop based on the position of the hovered item and updates the anchorReference prop to "anchorPosition". Once you make these changes, your popover element should display the triangle shape pointing to the hovered item and the popover content should be positioned next to the hovered item.
;