How to position a popup box (child page) in a React table (parent) in a relative manner - CSS/ReactJS/Javascript

Question

I am working on a React Table. I have a columns in which the data cells have an expander icon. If we click on the expander, a popup page/tooltip is opened/displayed.

Now I have two question - 1. How can a display the popup page/tooltip relative wrt to data cell in which the expander was clicked. For example age has 1000s of rows. There is pagination and page size. So suppose the position of the popup box/tooltip when row 4 is clicked will be different from the position of the popup box/tooltip when row 7 is clicked. The small yellow thing you are seeing is my popup page/tooltip

In my Code, the popup is fixed to the same position irrespective of which row cell of that particular column I click.

I want to know how can display the popup page relative wrt to data cell in which the expander was clicked. Basically changing top and left will do the job. But how can I implement. Based on what should I give top and left?

The second question is - 2. How can I close the popup page if I click outside the popup page?

My Complete Code Sample is here - Demo/Fiddle

This is my Popup Page CSS

.filter-child {
  width: 30%;
  position: absolute;
  z-index: 10;
  background: #ffffe0;
  padding: 15px;
  border: solid 1px #e9eff4;
  top: 32%;
  left: 45%;
}

What is the best way to achieve this - CSS/Plain JS/React Props from parent? If i use React Props what should I send as props for this relative styling.

Can this be achieved by CSS/Vanilla JS?

If you can help me in this regard, kindly update my Demo/Fiddle and show me how to achieve the desired functionality.

It may seem that parent page/table is the parent but here according to my understanding the data cell/row cell (on which the click was made) is acting as the real parent.

The child popup-box/tooltips will not be in the position of the cell which was clicked. I want to position this child popup-box/tooltips a little below the the position of the cell which was clicked.

Can someone on Stack update/fork my Demo/Fiddle and show me how to achieve the desired functionality?

utopia utopia · Accepted Answer · 2019-03-21T11:41:33

I think a solution could also be that you check the X and Y position on click and store it somewhere in state.

 style: {
    left: 0,
    top: 0,
  },

After that you just send in the coordinates as style. That way you can display the popup correctly

 <div style={this.state.style}>

How to position a popup box (child page) in a React table (parent) in a relative manner - CSS/ReactJS/Javascript

2 Answers