Bootstrap Tooltips, 테이블에서 이상하게 보일 때 해결법

td에 tooltip을 추가하면 해당 td에 마우스 오버시 tooltip이 td 사이에 생기면서 td가 하나씩 옆으로 밀려나는 현상이 발생한다.

그럴 때 tooltip이 있는 td에 data-container="body" 속성을 추가하면 td가 밀려나지 않고 예쁘게 보이게 된다.

<td data-container="body" data-toggle="tooltip" title="테스트입니다.">
 테스트
</td>

 

그리고 꼭 td에 tooltip을 추가할 때 뿐만 아니라,

table 안에 어떠한 태그에 tooltip을 추가했을 때 해당 tooltip이 table 영역을 벗어나서

tooltip이 잘린다면 그 때에도 data-container="body" 속성을 추가하면 간단히 해결할 수 있다.

<td>
    <a href="test.html" data-container="body" data-toggle="tooltip" title="테스트입니다.">
        테스트
    </a>
</td>

 

----------------------------------------------------

(24. 07. 03) 해당 오류가 angular ngbTooltip 에서도 발견되어 해결해보니 data-를 뺀,

container="body" 속성을 추가하면 정상작동 되는 것을 확인했습니다.

또한, 툴팁이 종속된 태그 범위에서만 그려져서 일부 가려지는 현상 수정에도 유용하게 작동됩니다.

참고 바랍니다~

 

 

참고 출처 : https://stackoverflow.com/questions/21938008/bootstraps-tooltip-moves-table-cells-to-right-a-bit-on-hover