마땅한 JS 툴팁 라이브러리가 없어서 많이 찾아 헤맸는데 좋은 걸 발견해 공유합니다.
Tippy.js 입니다. 저는 쓰기가 간편한 게 가장 맘에 들었습니다.
https://atomiks.github.io/tippyjs/
코드
예제 코드만 보면 이걸 어떻게 쓰라는 것인가 하는 생각이 들 수 있는데요. 아래와 같은 식으로 응용해서 사용하면 됩니다.
import tippy from 'tippy.js';
import 'tippy.js/dist/tippy.css';
document.querySelectorAll('[data-tooltip]').forEach(el => {
tippy(el, {
content: decodeURIComponent(el.dataset.tooltip),
allowHTML: true, // 툴팁에 HTML 넣을 수 있게
interactive: true, // 툴팁에 있는 링크 클릭 가능하게
})
});content에는 원래 그냥 텍스트를 넣으면 되는데, 저는 data-tooltip 프로퍼티에 html을 넣으려고(그래서 allowHTML을 true로 줬습니다), URL 인코딩을 해서 텍스트를 넣었습니다. 그래서 JS에서 디코딩을 한 것입니다.
이상입니다.
댓글 남기기