툴팁 오버플로우 문제 해결

### 에러 노트: 툴팁 오버플로우 문제 해결

#### 문제 설명

툴팁이 테이블 내에 위치하며, 마우스를 오버할 때 툴팁이 테이블 범위 밖으로 표시되지 않는 문제입니다. 이는 툴팁이 표시될 때, 부모 컨테이너나 테이블의 `overflow` 속성 설정에 의해 툴팁이 테이블 영역을 벗어나지 못하는 현상입니다. 이로 인해, 툴팁이 잘리거나 겹쳐서 보여지지 않게 됩니다.

#### 원인

1. 테이블 및 부모 컨테이너에 설정된 `overflow` 속성이 툴팁이 테이블 영역을 벗어나지 못하게 제한하고 있기 때문입니다.
2. 툴팁의 `position` 설정이 제대로 되어 있지만, `overflow: hidden` 속성으로 인해 툴팁이 테이블 외부로 나오지 못합니다.

#### 해결 방법

테이블과 부모 컨테이너의 `overflow` 속성을 수정하여 툴팁이 테이블 범위를 벗어날 수 있도록 설정합니다.

##### 해결 방법:

1. **테이블(`.table.table-hover.disabilityHistory`)에 `overflow: visible` 추가**
    
    - 툴팁이 테이블 영역을 벗어날 수 있도록 `position: relative`와 `overflow: visible` 속성을 적용합니다.
2. **부모 컨테이너(`.wrap-tbl.disabilityHistory`)에 `overflow: visible` 추가**
    
    - 부모 컨테이너가 툴팁을 가리지 않도록 `position: relative`와 `overflow: visible` 속성을 설정합니다.
3. **툴팁 컨테이너와 텍스트 스타일 개선**
    
    - 툴팁이 화면 외부로 나가지 않도록 적절한 `position` 및 `z-index` 값을 설정하여 툴팁이 다른 요소 위에 표시되도록 합니다.

/* 테이블에 스크롤이 생기지 않도록 함 (옵션) */
.table.table-hover.disabilityHistory {
  position: relative; /* 툴팁이 테이블 밖으로 나올 수 있도록 */
  overflow: visible; /* 테이블 범위를 넘어가는 내용은 보이도록 설정 */
}

/* 테이블 부모 컨테이너에서 overflow 설정 */
.wrap-tbl.disabilityHistory {
  position: relative; /* 툴팁이 테이블 밖으로 나올 수 있도록 */
  overflow: visible; /* 테이블 부모 컨테이너가 넘치는 툴팁을 보이게 설정 */
}

/* 툴팁을 감싸는 요소 스타일 */
.tooltip-container {
  position: relative;
  display: inline-block;
  text-align: center;
  vertical-align: middle; /* 이미지를 세로 중앙에 정렬 */
  overflow: visible; /* 툴팁이 테이블 셀을 넘어갈 수 있도록 설정 */
}

/* 툴팁 텍스트 스타일 */
.tooltip-container .tooltip-text {
  visibility: hidden; /* 기본적으로 툴팁 숨김 */
  width: auto; /* 최소 너비 설정 */
  min-width: 300px; /* 최소 너비 제한 */
  background-color: rgba(0, 0, 0, 0.75);
  color: #fff;
  text-align: center;
  border-radius: 5px;
  padding: 10px;
  position: absolute;
  z-index: 9999; /* 툴팁을 다른 요소들 위에 표시 */
  bottom: 50%; /* 툴팁을 요소 위쪽에 표시 */
  left: 50%; /* 툴팁을 가운데로 표시 */
  transform: translateX(-50%); /* 툴팁을 정확히 가운데로 이동 */
  opacity: 0;
  transition: opacity 0.3s; /* 툴팁의 부드러운 전환 효과 */
  white-space: normal;
  word-wrap: break-word;
}

/* 마우스 오버 시 툴팁 보이기 */
.tooltip-container:hover .tooltip-text {
  visibility: visible;
  opacity: 1;
}

 

<div class="wrap-tbl disabilityHistory">
  <table class="table table-hover disabilityHistory" id="errorHistoryTable">
    <tr>
      <td class="tooltip-container" style="text-align: center;">
        <img src="https://csms.moderntec.kr/image/mouseover.jpeg" style="width: auto; height: 50px;" />
        <span class="tooltip-text" th:text="${er.cntrm}">툴팁 텍스트</span>
      </td>
    </tr>
  </table>
</div>