html title 커스텀(tooltip)

기본적으로 html에서 title을 제공해준다.

근데 사용자에게서 요구사항이 있었다.

글씨크기가 너무 작다. 키워달라...

처음엔 그냥 css로 수정했다.

<style>
/* 툴팁 스타일 */
.custom-tooltip {
    position: relative;
    display: inline-block;
    cursor: pointer;
}

.custom-tooltip:hover::after {
    content: attr(data-title); /* data-title 값 표시 */
    position: absolute;
    background-color: black;
    color: white;
    font-size: 16px;
    padding: 5px 10px;
    border-radius: 5px;
    white-space: nowrap;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 100;
}
</style>

<span class="custom-tooltip" data-title="툴팁입니다.">ㅇㅇ</span>

gpt가 참 편하다.

 

그런데 저렇게 하니 툴팁을 띄우면 기존 데이터를 가려버린다는 이슈가 또 있었다.

조절을 해봤는데 title 이 나오는 위치는 참 변경이 힘들었다.(결국안됨)

 

그래서 그냥 너무 귀찮았지만 javascript로 넣기로 했다.

조건은 2가지다.

1. 글씨 크기를 크게키울것

2. 본문을 가리지않게 타이틀 위치를 마우스 아래로 나오게할것

<table>
	<tbody>
            <tr>
           	 <td class="title_tooltip" title="test툴팁">테스트입니다</td>
            </tr>
	</tbody>
</table>

$('body').append('<div class="tooltip" style="position: absolute; background-color: black; font-size: 20px; color: white;"><div class="tipBody"></div></div>');
let tip;
$('.title_tooltip[title]').mouseover(function(e) {
    tip = $(this).attr('title');
    $(this).attr('title','');
    $('.tooltip').fadeTo(300, 0.9).children('.tipBody').html( tip );
}).mousemove(function(e) {
    $('.tooltip').css('top', e.pageY + 30 );
    $('.tooltip').css('left', e.pageX + 20 );
}).mouseout(function(e) {
    $('.tooltip').hide();
    $(this).attr( 'title', tip );
});

툴팁을 띄울 div 먼저 만들어두고

title_tooltip 클래스에 마우스 올리면 title에 올라간 데이터를 가져와서 큰 툴팁이 나오도록 수정했다.

* 만약 기본 title이 나오는게 거슬린다면 속성 title이 아니라 다른 속성을 지정해서 사용하면된다 *

* title="test툴팁" 에서 data-title="test툴팁" 정도로 바꾸고 attr을 data-title 을 가져오면 된다. *