자바스크립트 툴팁 위치를 정하는게 머리 아플때

툴팁 위치를 offsetLeft와 offsetTop만으로 계산하는 방법

offsetLeft와 offsetTop을 사용하면 아이콘의 위치를 부모 요소내에서 상대적으로 계산할 수 있다. 부모 요소가 position: relative로 설정되어 있어야 툴팁을 정확히 배치할 수 있다.

1. 부모 div는 position을 설정

• 부모 div를 기준으로 툴팁을 표시할 아이콘의 상대적 위치를 offsetLeft, offsetTop으로 계산하는 경우, 부모 div는 position: relative 여야 한다.
  이유는 아래와 같다.
  1) offsetLeft, offsetTop의 상대적인 값을 부모를 기준으로 하기 위해서다.
  2) 툴팁의 position이 absolute임에도 불구하고 부모의 position을 relative로 설정하지 않으면, 툴팁은 자신이 표시할 위치의 기준을 부모의 외부로부터 찾게 된다. (postion : absolute의 특성)

2. tooltip의 position: absolute로 설정

• 툴팁의 position은 여전히 absolute로 설정해야 한다.

3. 스크롤을 고려해야 하는 경우에는 부모의 스크롤 값을 고려한다.

• offsetLeft와 offsetTop은 부모 요소 내에서의 상대적인 위치를 계산하지만, 스크롤이 존재하는 경우에는 부모의 스크롤 값도 값이 고려해야 한다.

예시 코드

html
Copy code
<div class="parent">
  <div class="icon">아이콘</div>
  <div class="tooltip">툴팁 내용</div>
</div>

javascript
Copy code
const icon = document.querySelector('.icon');
const tooltip = document.querySelector('.tooltip');

// 아이콘의 offsetLeft, offsetTop 사용
const iconLeft = icon.offsetLeft;
const iconTop = icon.offsetTop;

tooltip.style.position = 'absolute';
tooltip.style.left = `${iconLeft}px`;  // 아이콘의 왼쪽 위치
tooltip.style.top = `${iconTop - tooltip.offsetHeight}px`;  // 아이콘 위쪽에 툴팁을 위치

 

 

<li>요소의 툴팁 위치를 offsetLeft와 offsetTop만으로 계산하는 방법

<ul>에 position: relative를 설정하면 <li> 요소에 대한 offsetLeft와 offsetTop을 사용할 때 툴팁 위치를 정확히 설정하기 어려울 수 있다. 툴팁을 정확히 표시하려면 <li>에 position: relative를 설정하는 것이 더 적합하다.

설명

• <ul>에 position: relative를 설정할 경우, <li> 요소는 문서의 전체 레이아웃 기준으로 위치가 계산된다. 이로 인해 offsetLeft와 offsetTop을 사용해서 툴팁 위치를 조정하는 데 어려움이 있을 수 있다.
• <li>에 position: relative를 설정하면, 각 <li> 요소가 자신의 부모인 <ul>을 기준으로 위치가 계산되므로,  offsetLeft와 offsetTop으로 정확한 툴팁 위치를 설정할 수 있다.

해결 방법

• <li>에 position: relative를 설정한다.
• 마우스 오버 이벤트에서 <li> 요소의 offsetLeft와 offsetTop을 가져와 툴팁 위치를 설정한다.
• 툴팁에는 position: absolute를 설정하여 <li>를 기준으로 위치를 지정한다.

예시 코드

html
Copy code
<ul>
  <li class="item">아이템 1</li>
  <li class="item">아이템 2</li>
  <li class="item">아이템 3</li>
</ul>

<div class="tooltip">툴팁 내용</div>

css
Copy code
.tooltip {
  position: absolute;
  display: none;
  background-color: #333;
  color: white;
  padding: 5px;
  border-radius: 3px;
  z-index: 1000;
}
.item {
  position: relative;
}

javascript
Copy code
const items = document.querySelectorAll('.item');
const tooltip = document.querySelector('.tooltip');

items.forEach(item => {
  item.addEventListener('mouseover', function () {
    const offsetLeft = item.offsetLeft;
    const offsetTop = item.offsetTop;

    tooltip.style.left = `${offsetLeft}px`;
    tooltip.style.top = `${offsetTop + item.offsetHeight}px`; // 아이템 아래에 툴팁 위치
    tooltip.style.display = 'block';
  });

  item.addEventListener('mouseout', function () {
    tooltip.style.display = 'none';
  });
});