I'm looking for an Info-Box (with the code
<div class="inner">...</div>While I've managed to check the space on the left and right, I'm struggling to get the box to open on the left side as intended.
When hovering over the 'i' span, the Box should appear, and the z-index of all ".inner" elements will be set to 100 except for the one being hovered over. When leaving the "inner" div container, they will return to their normal z-index.
$(document).on("mouseenter", ".container", function() {
//height of the document
let getD = $(document).width();
console.log(" getD: " + getD);
//width of the document
let getDh = $(document).height();
console.log("getDh: " + getDh);
//Current offset position
var offset = $(this).offset();
console.log("Offset, Left: " + offset.left + " Top: " + offset.top)
var space_right = getD - offset.left;
var space_inner = $(".inner").width()
console.log(space_inner);
if (space_right >= space_inner) {
$(".inner").css("z-index", 100);
$(this).css("z-index", 5000);
console.log("true");
} else {
console.log("false");
}
});
$(document).on("mouseleave", ".inner", function() {
$(".inner").css("z-index", 5000);
$(".container").delay(400)
.queue(function(next) {
$(this).css("z-index", 100);
next();
})
});.tabelle-test,
tr,
td,
th {
border-style: solid;
}
#collapse {
border-collapse: collapse;
}
.container {
width: 20px;
height: 20px;
position: relative;
}
.inner {
position: absolute;
z-index: 5000;
background: rgb(9, 201, 153);
padding: 1em;
border-radius: 10px;
width: 250px;
clip-path: circle(5% at 5% 8%);
transition: all .5s ease-in-out;
cursor: pointer;
}
.inner>.info_p {
color: white;
font-size: .8rem;
}
.inner>.info_span {
float: left;
color: white;
font-weight: bold;
transition: color .5s;
position: relative;
top: -14px;
left: -4px;
}
.inner>.info_h {
color: white;
margin: 0;
}
.inner:hover {
clip-path: circle(75%);
z-index: 1000;
background: #00B6FF;
}
.innen:hover span {
color: rgba(255, 255, 255, 0)
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="tabelle-test" id="collapse">
<tr width="1020px">
<th width="1000px">lots of BlaBla</th>
<th width="20px" height="20px">Info</th>
</tr>
<tr>
<td>blaaaaaaaaa</td>
<td class="info-td">
<div class="container">
<div class="inner">
<span class="info_span">i</span>
<h1 class="info_h">Hey</h1>
<p class="info_p">This is an informative card that will tell you something that's... well, important!</p>
</div>
</div>
</td>
</tr>
</table>