Home > Net >  How to bring the popup fully displayed in front of everything?
How to bring the popup fully displayed in front of everything?

Time：10-14

.details {
      position: relative;
    }

    .details div {
        --bgcolor: #ffecec;
        --bdcolor: 2px solid #de8273;
        position: absolute;
        top: 0;
        transform: translateX(-125%) translateY(-7%);
        display: none;
        background: var(--bgcolor);
        z-index: 20;
        padding: 1rem;
        border: var(--bdcolor);
        width: 150px;
        border-radius: 5px;
            box-shadow: 1px 1px 2px 2px #a08c8c;
    }
    .details div:after{
       content: '';
        position: absolute;
        width: 7px;
        height: 7px;
        border-bottom: var(--bdcolor);
        border-right: var(--bdcolor);
        background: var(--bgcolor);
        left: 98.5%;
       transform: rotate(315deg);
        top: 10px;
    }
    .details:hover div {
      display: inline;
    }
    .tab{
        border-collapse : collapse;
        width : 100%;
        }
    .tab td{
         padding: 3px;
          font-size: 14px;
        }

    .tab tr:hover td{
        background:#20b5cc1f;
    }

    .tab th{
         padding: 4px;
        font-weight: normal;
        border: 1px solid black; 
         }
    .tab tr:nth-child(even) {
        background-color: #f2f2f2;
        }
    .tab tr:nth-child(odd) {
        background-color: yellow;
        }
    .container{
        border: 2px solid blue;
        padding: 4px;
        width: 500px;
        margin: 0 auto;
        overflow: auto;
        height: 200px;
    }
<div class="container">
    <table class="tab">
    <tr>
    <th>Column-1</th>
    <th>Column-2</th>
    <th>Column-3</th>
    </tr>
    <tr>
    <td>Row-1</td>
    <td>Row-1</td>
    <td class='details'>Hover-1
        <div>
        Curreny-1: XXX<br/>
        Curreny-2: XXX<br/>
        Other Info:XXX
        </div>
    </td>
    </tr>
    <tr>
    <td>Row-2</td>
    <td>Row-2</td>
    <td class='details'>Hover-2
        <div>
        Curreny-1: XXX<br/>
        Curreny-2: XXX<br/>
        Other Info:XXX
        </div>
    </td>
    </tr>
    <tr>
    <td>Row-2</td>
    <td>Row-2</td>
    <td class='details'>Hover-2
        <div>
        Curreny-1: XXX<br/>
        Curreny-2: XXX<br/>
        Other Info:XXX
        </div>
    </td>
    </tr>
    <tr>
    <td>Row-2</td>
    <td>Row-2</td>
    <td class='details'>Hover-2
        <div>
        Curreny-1: XXX<br/>
        Curreny-2: XXX<br/>
        Other Info:XXX
        </div>
    </td>
    </tr>
    <tr>
    <td>Row-2</td>
    <td>Row-2</td>
    <td class='details'>Hover-2
        <div>
        Curreny-1: XXX<br/>
        Curreny-2: XXX<br/>
        Other Info:XXX
        </div>
    </td>
    </tr>
    <tr>
    <td>Row-2</td>
    <td>Row-2</td>
    <td class='details'>Hover-2
        <div>
        Curreny-1: XXX<br/>
        Curreny-2: XXX<br/>
        Other Info:XXX
        </div>
    </td>
    </tr>
    <tr>
    <td>Row-1</td>
    <td>Row-1</td>
    <td class='details'>Hover-1
        <div>
        Curreny-1: XXX<br/>
        Curreny-2: XXX<br/>
        Other Info:XXX
        </div>
    </td>
    </tr>
    <tr>
    <td>Row-2</td>
    <td>Row-2</td>
    <td class='details'>Hover-2
        <div>
        Curreny-1: XXX<br/>
        Curreny-2: XXX<br/>
        Other Info:XXX
        </div>
    </td>
    </tr>
    <tr>
    <td>Row-2</td>
    <td>Row-2</td>
    <td class='details'>Hover-2
        <div>
        Curreny-1: XXX<br/>
        Curreny-2: XXX<br/>
        Other Info:XXX
        </div>
    </td>
    </tr>
    <tr>
    <td>Row-2</td>
    <td>Row-2</td>
    <td class='details'>Hover-2
        <div>
        Curreny-1: XXX<br/>
        Curreny-2: XXX<br/>
        Other Info:XXX
        </div>
    </td>
    </tr>
    <tr>
    <td>Row-2</td>
    <td>Row-2</td>
    <td class='details'>Hover-2
        <div>
        Curreny-1: XXX<br/>
        Curreny-2: XXX<br/>
        Other Info:XXX
        </div>
    </td>
    </tr>
    <tr>
    <td>Row-2</td>
    <td>Row-2</td>
    <td class='details'>Hover-2
        <div>
        Curreny-1: XXX<br/>
        Curreny-2: XXX<br/>
        Other Info:XXX
        </div>
    </td>
    </tr>
    </table>
    </div>

How to bring the popup fully displayed in front of everything, while hovering on column-3 data. Is it possible to achieve without javascript or jquery. It does work when i make container div to overflow: visible but that makes table to come out of the container div which is not I want. I want table to be inside container div and when I hover on table data (hover), the popup should display completely outside the container div. Can someone please help me with this issue. Thank you so much in advance.

  .details {
      position: relative;
    }

    .details div {
        --bgcolor: #ffecec;
        --bdcolor: 2px solid #de8273;
        position: absolute;
        top: 0;
        transform: translateX(-125%) translateY(-7%);
        display: none;
        background: var(--bgcolor);
        z-index: 20;
        padding: 1rem;
        border: var(--bdcolor);
        width: 150px;
        border-radius: 5px;
            box-shadow: 1px 1px 2px 2px #a08c8c;
    }
    .details div:after{
       content: '';
        position: absolute;
        width: 7px;
        height: 7px;
        border-bottom: var(--bdcolor);
        border-right: var(--bdcolor);
        background: var(--bgcolor);
        left: 98.5%;
       transform: rotate(315deg);
        top: 10px;
    }
    .details:hover div {
      display: inline;
    }
    .tab{
        border-collapse : collapse;
        width : 100%;
        }
    .tab td{
         padding: 3px;
          font-size: 14px;
        }

    .tab tr:hover td{
        background:#20b5cc1f;
    }

    .tab th{
         padding: 4px;
        font-weight: normal;
        border: 1px solid black; 
         }
    .tab tr:nth-child(even) {
        background-color: #f2f2f2;
        }
    .tab tr:nth-child(odd) {
        background-color: yellow;
        }
    .container{
        border: 2px solid blue;
        padding: 4px;
        width: 500px;
        margin: 0 auto;
        overflow: auto;
        height: 200px;
    }

<div class="container">
    <table class="tab">
    <tr>
    <th>Column-1</th>
    <th>Column-2</th>
    <th>Column-3</th>
    </tr>
    <tr>
    <td>Row-1</td>
    <td>Row-1</td>
    <td class='details'>Hover-1
        <div>
        Curreny-1: XXX<br/>
        Curreny-2: XXX<br/>
        Other Info:XXX
        </div>
    </td>
    </tr>
    <tr>
    <td>Row-2</td>
    <td>Row-2</td>
    <td class='details'>Hover-2
        <div>
        Curreny-1: XXX<br/>
        Curreny-2: XXX<br/>
        Other Info:XXX
        </div>
    </td>
    </tr>
    <tr>
    <td>Row-2</td>
    <td>Row-2</td>
    <td class='details'>Hover-2
        <div>
        Curreny-1: XXX<br/>
        Curreny-2: XXX<br/>
        Other Info:XXX
        </div>
    </td>
    </tr>
    <tr>
    <td>Row-2</td>
    <td>Row-2</td>
    <td class='details'>Hover-2
        <div>
        Curreny-1: XXX<br/>
        Curreny-2: XXX<br/>
        Other Info:XXX
        </div>
    </td>
    </tr>
    <tr>
    <td>Row-2</td>
    <td>Row-2</td>
    <td class='details'>Hover-2
        <div>
        Curreny-1: XXX<br/>
        Curreny-2: XXX<br/>
        Other Info:XXX
        </div>
    </td>
    </tr>
    <tr>
    <td>Row-2</td>
    <td>Row-2</td>
    <td class='details'>Hover-2
        <div>
        Curreny-1: XXX<br/>
        Curreny-2: XXX<br/>
        Other Info:XXX
        </div>
    </td>
    </tr>
    <tr>
    <td>Row-1</td>
    <td>Row-1</td>
    <td class='details'>Hover-1
        <div>
        Curreny-1: XXX<br/>
        Curreny-2: XXX<br/>
        Other Info:XXX
        </div>
    </td>
    </tr>
    <tr>
    <td>Row-2</td>
    <td>Row-2</td>
    <td class='details'>Hover-2
        <div>
        Curreny-1: XXX<br/>
        Curreny-2: XXX<br/>
        Other Info:XXX
        </div>
    </td>
    </tr>
    <tr>
    <td>Row-2</td>
    <td>Row-2</td>
    <td class='details'>Hover-2
        <div>
        Curreny-1: XXX<br/>
        Curreny-2: XXX<br/>
        Other Info:XXX
        </div>
    </td>
    </tr>
    <tr>
    <td>Row-2</td>
    <td>Row-2</td>
    <td class='details'>Hover-2
        <div>
        Curreny-1: XXX<br/>
        Curreny-2: XXX<br/>
        Other Info:XXX
        </div>
    </td>
    </tr>
    <tr>
    <td>Row-2</td>
    <td>Row-2</td>
    <td class='details'>Hover-2
        <div>
        Curreny-1: XXX<br/>
        Curreny-2: XXX<br/>
        Other Info:XXX
        </div>
    </td>
    </tr>
    <tr>
    <td>Row-2</td>
    <td>Row-2</td>
    <td class='details'>Hover-2
        <div>
        Curreny-1: XXX<br/>
        Curreny-2: XXX<br/>
        Other Info:XXX
        </div>
    </td>
    </tr>
    </table>
    </div>

CodePudding user response：

1) You can easily achieve the result by first finding the top, left of the respective .details container.

const { top, left } = element.target.getBoundingClientRect();

2) Set popup's top as

child.style.top = `${top}px`

3) Don't forget to remove the position: relative to the .details container.

.details{
  /* position: relative; */
}

JS CODE

const details = Array.from(document.querySelectorAll(".details"));
details.forEach(detail => {
  detail.addEventListener("mouseover", element => {
    const { top, left } = element.target.getBoundingClientRect();
    const child = element.target.children[0];
    //child.style.left = `${left}px`
    child.style.top = `${top}px`
  })
})


const details = Array.from(document.querySelectorAll(".details"));
details.forEach(detail => {
  detail.addEventListener("mouseover", element => {
    const { top, left } = element.target.getBoundingClientRect();
    const child = element.target.children[0];
    //child.style.left = `${left}px`
    child.style.top = `${top}px`
  })
})
.details div {
  --bgcolor: #ffecec;
  --bdcolor: 2px solid #de8273;
  position: absolute;
  top: 0;
  transform: translateX(-125%) translateY(-7%);
  display: none;
  background: var(--bgcolor);
  z-index: 20;
  padding: 1rem;
  border: var(--bdcolor);
  width: 150px;
  border-radius: 5px;
  box-shadow: 1px 1px 2px 2px #a08c8c;
}

.details div:after {
  content: "";
  position: absolute;
  width: 7px;
  height: 7px;
  border-bottom: var(--bdcolor);
  border-right: var(--bdcolor);
  background: var(--bgcolor);
  left: 98.5%;
  transform: rotate(315deg);
  top: 10px;
}

.details:hover div {
  display: inline;
}

.tab {
  border-collapse: collapse;
  width: 100%;
}

.tab td {
  padding: 3px;
  font-size: 14px;
}

.tab tr:hover td {
  background: #20b5cc1f;
}

.tab th {
  padding: 4px;
  font-weight: normal;
  border: 1px solid black;
}

.tab tr:nth-child(even) {
  background-color: #f2f2f2;
}

.tab tr:nth-child(odd) {
  background-color: yellow;
}

.container {
  border: 2px solid blue;
  padding: 4px;
  width: 500px;
  margin: 0 auto;
  overflow: auto;
  height: 200px;
}
<div class="container">
  <table class="tab">
    <tr>
      <th>Column-1</th>
      <th>Column-2</th>
      <th>Column-3</th>
    </tr>
    <tr>
      <td>Row-1</td>
      <td>Row-1</td>
      <td class='details'>Hover-1
        <div>
          Curreny-1: XXX<br /> Curreny-2: XXX<br /> Other Info:XXX
        </div>
      </td>
    </tr>
    <tr>
      <td>Row-2</td>
      <td>Row-2</td>
      <td class='details'>Hover-2
        <div>
          Curreny-1: XXX<br /> Curreny-2: XXX<br /> Other Info:XXX
        </div>
      </td>
    </tr>
    <tr>
      <td>Row-2</td>
      <td>Row-2</td>
      <td class='details'>Hover-2
        <div>
          Curreny-1: XXX<br /> Curreny-2: XXX<br /> Other Info:XXX
        </div>
      </td>
    </tr>
    <tr>
      <td>Row-2</td>
      <td>Row-2</td>
      <td class='details'>Hover-2
        <div>
          Curreny-1: XXX<br /> Curreny-2: XXX<br /> Other Info:XXX
        </div>
      </td>
    </tr>
    <tr>
      <td>Row-2</td>
      <td>Row-2</td>
      <td class='details'>Hover-2
        <div>
          Curreny-1: XXX<br /> Curreny-2: XXX<br /> Other Info:XXX
        </div>
      </td>
    </tr>
    <tr>
      <td>Row-2</td>
      <td>Row-2</td>
      <td class='details'>Hover-2
        <div>
          Curreny-1: XXX<br /> Curreny-2: XXX<br /> Other Info:XXX
        </div>
      </td>
    </tr>
    <tr>
      <td>Row-1</td>
      <td>Row-1</td>
      <td class='details'>Hover-1
        <div>
          Curreny-1: XXX<br /> Curreny-2: XXX<br /> Other Info:XXX
        </div>
      </td>
    </tr>
    <tr>
      <td>Row-2</td>
      <td>Row-2</td>
      <td class='details'>Hover-2
        <div>
          Curreny-1: XXX<br /> Curreny-2: XXX<br /> Other Info:XXX
        </div>
      </td>
    </tr>
    <tr>
      <td>Row-2</td>
      <td>Row-2</td>
      <td class='details'>Hover-2
        <div>
          Curreny-1: XXX<br /> Curreny-2: XXX<br /> Other Info:XXX
        </div>
      </td>
    </tr>
    <tr>
      <td>Row-2</td>
      <td>Row-2</td>
      <td class='details'>Hover-2
        <div>
          Curreny-1: XXX<br /> Curreny-2: XXX<br /> Other Info:XXX
        </div>
      </td>
    </tr>
    <tr>
      <td>Row-2</td>
      <td>Row-2</td>
      <td class='details'>Hover-2
        <div>
          Curreny-1: XXX<br /> Curreny-2: XXX<br /> Other Info:XXX
        </div>
      </td>
    </tr>
    <tr>
      <td>Row-2</td>
      <td>Row-2</td>
      <td class='details'>Hover-2
        <div>
          Curreny-1: XXX<br /> Curreny-2: XXX<br /> Other Info:XXX
        </div>
      </td>
    </tr>
  </table>
</div>

Page link：https//www.codepudding.com/net/151882.html

Prev:Android Play Console - how to close or remove an "Open testing track"
Next:not getting value in html from with javaScript
  • Related

About Us:  Contact Us      Terms of Service       Privacy Policy

Copyright © 2010-2023，Powered By CodePudding