.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>