Как в 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>

Answer 1

[Виктор Кожухарь]

А зачем такие сложности с такой простой задачей, как тултипы? Их ведь можно реализовать полностью на CSS, просто добавив нужному элементу, например, атрибут "tooltip"



Анимацию уже сами добавите, если очень нужна

Если же очень хотите именно при наведении на следующий элемент что-то делать, то могу просто предложить идею селектора, который позволяет таким образом выбирать



.custom-tooltip:has(+ *:hover) означает, что выбрать надо те элементы .custom-tooltip, у которых на следующем за ними элементе наведена мышь.
"+" выбор непосредственно следующего элемента
"+ *"- выбор любого непосредственного следующего элемента
"+ *:hover" - выбор любого непосредственного следующего элемента, на который наведена мышь.
has  выбирает элементы .custom-tooltip, с которым связаны элементы, выбранные при помощи уточняющего селектора в скобках.

Comments

[Иван]

Спасибо большое!