Javascript 커스텀 툴팁 (CSS, HTML)

작업 중 급하게 툴팁 기능이 필요했는데 회사 동료분이 던져주셨다...

 

사실 jQuery, Bootstrap 등 다양한 라이브러리에서 툴팁을 제공한다.

 

아무튼...

 

다음과 같은 CSS를 적용시켜주자.

 

tooltip.css

[data-tooltip-text]:hover {
    position: relative;
}

[data-tooltip-text]:hover:after {
    background-color: #000000;
    background-color: rgba(0, 0, 0, 0.8);

    -webkit-box-shadow: 0px 0px 3px 1px rgba(50, 50, 50, 0.4);
    -moz-box-shadow: 0px 0px 3px 1px rgba(50, 50, 50, 0.4);
    box-shadow: 0px 0px 3px 1px rgba(50, 50, 50, 0.4);

    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;

    color: #FFFFFF;
    font-size: 12px;
    content: attr(data-tooltip-text);

    margin-bottom: 10px;
    top: 130%;
    left: 0;
    padding: 7px 12px;
    position: absolute;
    width: auto;
    min-width: 50px;
    max-width: 500px;
    word-wrap: break-word;

    z-index: 9999;
}

 

사용할 본문에 Attribute를 적용시켜주면 된다.

 

tooltip.html

<div id="title" data-tooltip-text="튤팁 내용을 여기에 작성"> 내용이 길어... </div>

 

출력 결과 (마우스를 올려야 보인다.)

 

 

만약 가변적으로 사용해야 한다면 javascript로 컨트롤 해주면 된다.

// 툴팁 추가 대상을 잡아주고
const targetDiv = document.querySelector(`#title`);

// attribute를 set 해준다.
const tooltip = '툴팁 내용을 여기에 입력';
targetDiv.setAttribute('data-tooltip-text', tooltip);