Check out my jsfiddle example here: https://jsfiddle.net/annahisenberg/ft10ersb/34/
Currently, I have the following code:
<div
id="more_options_popup"
style={{
left: this.ref.current.offsetLeft - 140 + "px",
top: this.ref.current.offsetTop - 150 + "px"
}}
>
However, I'm facing an issue in my actual project with this approach. Adjusting the offsetTop to -130 brings it too close to my button when there are more items in the popup. On the other hand, if there's only one <p> tag in the popup, it ends up being too far away from the button.
I'm unable to display this behavior properly on the jsFiddle.
React Code:
// React component goes here...
CSS:
#more_options_button {
// CSS styles for more options button
}
#more_options_popup {
// CSS styles for more options popup
}