Как по краям обрезать after от внешнего блока?

Question

Нужно чтобы обрезалась только линия и ничего больше.

overflow: hidden не спасает ситуацию

$('.container').mouseenter(function(e){
  if($('.container .tooltip').length == 0){
    $('.container').append('<div class="tooltip"></div>');
  }
});

$('.container').mousemove(function(e){
  let left = $('.container')[0].getBoundingClientRect().left;
  let top = $('.container')[0].getBoundingClientRect().top;
  let x = e.clientX - left;
  let y = e.clientY - top;
  $('.container .tooltip').html(`x: ${x}, y: ${y}`);
  let wTooltip = $('.tooltip').width();
  let hTooltip = $('.tooltip').height();
  let nLeft = (x < ($('.container')[0].offsetWidth / 2)) ? x + 12 : x - wTooltip - 12;
  $('.tooltip').css({
    top: y +'px',
    left: nLeft +'px'
  });
});

$('.container').mouseleave(function(e){
  $('.container .tooltip').remove();
});

.container {
  width: 300px;
  height: 100px;
  border: 1px solid #999;
  margin: 10px;
  position: relative;
}
.info {
  width: 50px;
  height: 50px;
  border: 1px solid #999;
  position: absolute;
  bottom: -20px;
  right: -10px;
  background: #4ff29f;
  padding: 5px;
}
.tooltip {
  position: relative;
  z-index: 5;
  border: 1px solid #999;
  display: inline-block;
  padding: 0 5px;
  background: #fff;
}
.tooltip:after {
  content: '';
  position: absolute;
  top: -1px;
  border-top: 1px solid #999;
  z-index: 4;
  left: -1000px;
  right: -1000px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <div class="info">Text<br>Text</div>
</div>

Скрин, то что хочется получить

Answer 1

В том виде, в котором вы хотите это видеть, это невозможно.

К сожалению, вам придется отказаться от одного из двух:

либо от position: absolute, так как на эти блоки не распространяется действие свойства overflow. Но можно обрезать используя свойство clip-path.
либо от :after, так как clip-path не работает с псевдо-элементами.

Answer 2

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <div class="tooltip__container">
    <div class="tooltip__wrapper"></div>
  </div>
  <div class="info">Text<br />Text</div>
</div>
<style>
  .container {
    width: 301px;
    height: 120px;

    margin: 10px;
    position: relative;
  }
  .tooltip__container {
    height: 122px;
    overflow: hidden;
    width: 301px;
    border-right: 1px solid #999;
  }
  .tooltip__wrapper {
    width: 300px;
    height: 100px;

    border: 1px solid #999;
  }
  .info {
    width: 50px;
    height: 50px;
    border: 1px solid #999;
    position: absolute;
    bottom: -20px;
    right: -10px;
    background: #4ff29f;
    padding: 5px;
    z-index: 20;
  }
  .tooltip {
    position: relative;
    z-index: 5;
    border: 1px solid #999;
    display: inline-block;
    padding: 0 5px;
    background: #fff;
  }
  .tooltip:after {
    content: "";
    position: absolute;
    top: -1px;
    border-top: 1px solid #999;
    z-index: 4;
    left: -1000px;
    right: -1000px;
  }
</style>
<script>
  $(".tooltip__wrapper").mouseenter(function (e) {
    if ($(".tooltip__wrapper .tooltip").length == 0) {
      $(".tooltip__wrapper").append('<div class="tooltip"></div>');
    }
  });

  $(".tooltip__wrapper").mousemove(function (e) {
    let left = $(".tooltip__wrapper")[0].getBoundingClientRect().left;
    let top = $(".tooltip__wrapper")[0].getBoundingClientRect().top;
    let x = e.clientX - left;
    let y = e.clientY - top;
    $(".tooltip__wrapper .tooltip").html(`x: ${x}, y: ${y}`);
    let wTooltip = $(".tooltip").width();
    let hTooltip = $(".tooltip").height();
    let nLeft =
      x < $(".tooltip__wrapper")[0].offsetWidth / 2
        ? x + 12
        : x - wTooltip - 12;
    $(".tooltip").css({
      top: y + "px",
      left: nLeft + "px",
    });
  });

  $(".tooltip__wrapper").mouseleave(function (e) {
    $(".tooltip__wrapper .tooltip").remove();
  });
</script>

БЛОГ НА HUSL

Как по краям обрезать after от внешнего блока?

Ответы (2 шт):