Как в js, scss, html реализовать tooltip который показывается если навести на объект ниже?

Question

[Иван]

Я пытаюсь сделать в Thymeleaf компонент tooltip и когда я его добавляю то он должен смотреть под себя и если там есть какой-то объект(компонент, input, p, svg...) то при наведении на этот объект tooltip покажется.

Это изначальный код:

$('.custom-tooltip').mouseenter(function () {
    const $tooltipText = $(this).find('.tooltip-text');

    const rect = $tooltipText.get(0).getBoundingClientRect();
    const viewportHeight = $(window).height();

    if (rect.top < 0 || rect.bottom > viewportHeight) {
        $tooltipText.addClass('below');
    } else {
        $tooltipText.removeClass('below');
    }

    $(this).mouseleave(function () {
        $(this).find('.tooltip-text').removeClass('below');
    });
});

Это как я пытался реализовать но не получилось

$('.custom-tooltip').mouseenter(function () {
    const $tooltipText = $(this).find('.tooltip-text');

    const rect = $tooltipText.get(0).getBoundingClientRect();
    const viewportHeight = $(window).height();

    if (rect.top < 0 || rect.bottom > viewportHeight) {
        $tooltipText.addClass('below');
    } else {
        $tooltipText.removeClass('below');
    }

    $(this).mouseleave(function () {
        $(this).find('.tooltip-text').removeClass('below');
    });
});
$('.custom-tooltip').each(function(){
    const $tooltip = $(this);
    const $elementToBeHoveredOver = $tooltip.next();
    if($elementToBeHoveredOver.length === 0){
        console.error('Tooltips must be next ( have below) element above/below which is hovering!');
    }else if($elementToBeHoveredOver.hasClass('custom-tooltip')){
        console.error('Tooltips cannot be next to each other!');
    }
});

Стили

.custom-tooltip {
  position: relative;
  display: inline-block;
  width: fit-content;
  text-decoration: underline;
  &:hover{
    .tooltip-text{
      visibility: visible;
      opacity: 1;
    }
  }
  .tooltip-text {
    visibility: hidden;
    background-color: black;
    color: white;
    text-align: center;
    border-radius: 20px;
    padding: 8px 12px;
    position: absolute;
    z-index: 100;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(-10px);
    box-shadow: 0 2px 8px rgba(26, 26, 26, 0.5);
    min-width: 120px;
    width: fit-content;
    max-width: 280px;
    word-wrap: anywhere;
    overflow-wrap: anywhere;
    hyphens: auto;
    opacity: 0;
    user-select: none;

    &::after {
      content: "";
      width: 10px;
      hyphens: auto;
      height: 10px;
      background-color: black;
      position: absolute;
      left: 50%;
      transform: translateX(-50%) rotate(45deg);
      bottom: -5px;
      z-index: -1;
    }

    &.below {
      bottom: auto;
      top: 100%;
      transform: translateX(-50%) translateY(10px);
      &::after {
        top: -5px;
        bottom: auto;
      }
      &.right, &.left{
        transform: translateX(-50%) translateY(15px);
      }
    }

    &.left {
      transform: translateX(-30%) translateY(-10px);
      &::after {
        left: 19%;
        bottom: -4px;
      }
    }

    &.right {
      transform: translateX(-70%) translateY(-10px);
      &::after {
        left: 80%;
        bottom: -4px;
      }
    }
  }
}
@media screen and (min-width: 768px){
  .custom-tooltip {
    .tooltip-text {
      max-width: 300px;
      width: max-content;
    }
  }
}

<div class="row">
      <div class="col-12">
          <tc:tooltip tooltipText="|Lorem ipsum dolor sit amet, consectetuer adipiscing elit.|"></tc:tooltip>
          <anyhtmltag>My html tag</anyhtmltag> <!-- При наведении на этот обьект должен показаться tooltip над/под ним -->
      </div>
</div>