[JS+VUE] 자바스크립트로 툴팁 위치 제어하기 ( 스크롤 영역 툴팁 )

스크롤이 가능한 화면에서 툴팁이 잘리는 문제를
자바스크립트로 툴팁 위치를 잡아서 해결했다.

---

 

1. 문제

부모 요소 overflow scroll

 

2. 시도

z-index 처리 

부모 overflow x와 y의 속성을 다르게 주기 

 

3. 해결

문제 상황 재연을 위해 W3Schools을 참고하여 간단한 화면을 만들었다.

<template>
<div class="tooltip-test-page">  
  <div class="scroll-wrapper">
    <div  v-for="i in 10" :key="i" class="box">
      <div class="tooltip">Hover over me
        <span class="tooltiptext">Tooltip {{ i }}</span>
      </div>
    </div>
  </div>
</div>
</template>

<style scoped>
.tooltip-test-page {
  width: 100vw;
  height: 100vh;
  
  display: flex;
  justify-content: center;
  align-items: center;
  .scroll-wrapper{
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    overflow-x: auto;

    width: 500px;
    height: 150px;
    background-color: aquamarine;

    .box{
      width: 100px;
      height: 100px;
      background-color: plum;
      margin: 10px;
      flex: 0 0 auto;

      .tooltip {
        position: relative;
        display: inline-block; 
        cursor: pointer;
        border-bottom: 1px dotted black;
      }

      .tooltip .tooltiptext {
        visibility: hidden;
        width: 120px;
        background-color: black;
        color: #fff;
        text-align: center;
        border-radius: 6px;
        padding: 5px 0;
        position: absolute;
        z-index: 1;
        bottom: 150%;
        left: 50%;
        margin-left: -60px;
      }

      .tooltip .tooltiptext::after {
        content: "";
        position: absolute;
        top: 100%;
        left: 50%;
        margin-left: -5px;
        border-width: 5px;
        border-style: solid;
        border-color: black transparent transparent transparent;
      }

      .tooltip:hover .tooltiptext {
        visibility: visible;
      }

    }
  }
}
</style>

 

 

html에 툴팁으로 사용할 div id="tooltip"을 추가하고

기존 툴팁 영역에는 @mouseover, @mouseout 이벤트를 추가했다.

<div class="tooltip-test-page">
  <div class="scroll-wrapper">
    <div  v-for="i in 10" :key="i" class="box">
      <div class="tooltip"
           @mouseover="showTooltip('Tooltip ' + i)"
           @mouseout="hideTooltip()"
      >Hover over me
      </div>
    </div>
  </div>
  <div id="tooltip">
    <div id="tooltip-inner"></div>
  </div>
</div>

 

 

스타일 파일에는 기존 hover 관련 css코드를 제거하고 새로 생긴 #tooltip css를 추가했다.

툴팁 position은 absolute로 넣었다.

.tooltip-test-page {
  width: 100vw;
  height: 100vh;
  
  display: flex;
  justify-content: center;
  align-items: center;
  .scroll-wrapper{
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    overflow-x: auto;

    width: 500px;
    height: 150px;
    background-color: aquamarine;

    .box{
      width: 100px;
      height: 100px;
      background-color: plum;
      margin: 10px;
      flex: 0 0 auto;
      .tooltip{
        cursor: pointer;
        border-bottom: 1px dotted black;
      }
    }
  }
  #tooltip {
		display: none;
		position: absolute;
		width: 250px;
		height: 200px;
		#tooltip-inner {
			position: absolute;
			bottom: 0;
			transform: translateX(-50%);
			padding: 8px 12px;
			border-radius: 8px;
      background-color: black;
      color: #fff;
			z-index: 1;

			color: var(--Grayscale-GRAY00, #fff);
			font-size: 12px;
			font-weight: 500;
			line-height: 16px; /* 133.333% */
			&::after {
        content: "";
        position: absolute;
        top: 100%;
        left: 50%;
        margin-left: -5px;
        border-width: 5px;
        border-style: solid;
        border-color: black transparent transparent transparent;
			}
		}
	}
}

 

 

script에서는 마우스 이벤트를 받아 위치를 계산하고 툴팁을 노출시키고 제거하는 코드를 추가했다.

/** 툴팁 노출 */
const showTooltip = msg => {
	const tooltip = document.getElementById('tooltip');
	const tooltipInner = document.getElementById('tooltip-inner');
	tooltipInner.innerHTML = msg;

	const el = event.target;
	const rect = el.getBoundingClientRect();

	tooltip.style.left = rect.left + (rect.width / 2) + 'px';
	tooltip.style.top = rect.top - 215 + 'px'; // 215는 툴팁 높이 + 마진
	tooltip.style.display = 'block';
};

/** 툴팁 숨김 */
const hideTooltip = () => {
	const tooltip = document.getElementById('tooltip');
	tooltip.style.display = 'none';
};

 

4. 결과

깔끔하게 툴팁이 위로 잘 올라온다.
툴팁에 마우스를 올리고 스크롤을 움직이면 툴팁이 고정되어 있으므로

그에 대한 처리만 추가하면 완벽할 것 같다.

 

참고

https://stackoverflow.com/questions/40093740/tooltip-element-with-absolute-positioning-being-clipped-by-container-with-overfl