test

by Joe

HTML

<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">ganz viel BlaBla</th>
    <th width="20px" height="20px">Info</th>
  </tr>
  <tr>
    <td>blaaaaaaaaa</td>
    <td class="info-td">
      <div class="section">
        <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>

CSS

.tabelle-test,
tr,
td,
th {
  border-style: solid;
}

#collapse {
  border-collapse: collapse;
}

.section {
  width: 100%;
  height: 20px;
  position: relative;
  top: 0;
}

.inner {
  position: absolute;
  z-index: 5000;
  background: rgb(9, 201, 153);
  padding: 1em;
  border-radius: 10px;
  width: 250px;
  clip-path: circle(5% at 93% 8%);
  transition: all .5s ease-in-out;
  cursor: pointer;
  right: -5px;
}

.inner>.info_p {
  color: white;
  font-size: .8rem;
}

.inner>.info_span {
  color: white;
  font-weight: bold;
  transition: color .5s;
  position: absolute;
  top: 1px;
  right: 18px;
}

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

JavaScript

$(document).on("mouseenter", ".container", function() {
  //höhe des Documents
  let getD = $(document).width();
  console.log(" getD: " + getD);

  //breite des Documents
  let getDh = $(document).height();
  console.log("getDh: " + getDh);

  //Aktuelle Position offset
  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();
    })
});