[js][Tippy]Tippy(Tooltip 라이브러리) 사용

프로젝트에서 툴팁을 태그 속성의 title 사용하기 때문에 시인성을 위해 개선이 필요했다.

간단하고 많이 사용하는 툴팁 라이브러리인 Tippy를 적용하여 해결하였다.

Tippy 소개 및 적용 예시를 남겨둔다.

 

기본적인 소개 및 사용법 그리고 Demo까지 너무나도 깔끔하고 완벽하다.

https://atomiks.github.io/tippyjs/

Tippy.js - Tooltip, Popover, Dropdown, and Menu Library

 

Tippy는 기본적으로 popper라이브러리를 이용하여 툴팁, 드롭다운 등을 제공한다.

원하는 대로 CSS가 적용가능하며, TypeScript를 지원하는 등 범용적 활용이 가능하다.

 

기본적인 구성은 다음과 같다.

tippy('selector', {
    content: 'tooltip content. ex) click here to ~~',
});

selector : css 셀렉터 그대로 활용 가능하다 (ex : '#id', '.class', 'tag', '[attribute="value"]' ...etc)

content  : tooltip에 출력될 내용이다.

속성 마지막에 쉼표가 있다. 해당 라이브러리를 이용할 시에는 문법적으로 오류가 나지 않으며 설명에도 쉼표를 쓰는 것을 볼 수 있다. 개인적인 생각으로는 옵션이 추가될 때 쉼표 여부에 오류 나는 귀찮은 일을 막기 위해 쉼표를 붙이면서 쓸 수 있도록 배려해준 거 같다.

 

프로젝트에서는 간단하게 아래와 같이 적용해 보았다.

function imgTippy(e){
    let id = e.id;
    let contentHtml = '<div class="tooltip-btn" onclick="viewImages(\''+imgId+'\')">View details</div>'
                    + '<div class="tooltip-btn" onclick="downImages(\''+imgId+'\')">Download</div>';
    tippy('#'+id, {
        content: contentHtml,
        allowHTML: true,
        interactive: true,
        delay: [0,100],
        animation: 'scale',
    });
}

위의 기능은 변동되는 이미지 영역에 마우스 오버(onmouseover)를 했을 경우 작동하게 하였으며,

툴팁에 두 개의 버튼 출력되어 이미지를 상세히 보여주거나 다운로드할 수 있도록 구성하였다.

allowHTML : content에 입력되는 문자열이 html 구성되어 출력되도록 해준다.

interactive : tooltip에 마우스 오버하여 상호작용할 수 있도록 해준다.

delay : 기본 단위는 ms.

            단일 숫자만 입력 시, 해당 숫자ms만큼 뒤에 툴팁 출력.

            [num1, num2] - num1는 툴팁 display까지 delay시간이며, num2는 툴팁 display 유지시간이다.

 

 

 

위의 코드 출력 시, 이미지이다. 버튼은 tippy domo css를 가져다 이용하였다.