본문으로 건너뛰기
안형우

안녕하세요. 14년차 풀스택 웹개발자 안형우입니다. 이 블로그에서는 WordPress, PHP, CSS, 사용성, 리눅스 서버 등 풀스택 웹개발에서 마주하는 다양한 문제 상황과 해결책, 필요한 개념들을 다룹니다. 👉 소개


작업물

📌 CSS가 어려운 이유 — 프로젝트 중심 실전 CSS 강의 소개 2023-04-13
📌 워드프레스, 답답한 빌더와 플러그인 대신 시원하게 커스터마징하기(강의) 2023-01-15
📌 아무도 말하지 않는 PHP의 좋은 점 2018-10-13
📌 유지보수하기 쉬운 CSS 전략(슬라이드) 2016-12-20
📌 워드프레스 테마에서 템플릿 파일 매칭 순서 2013-05-12
📌 [번역] CSS 코드 냄새 2013-01-01

간편한 툴팁 라이브러리 Tippy.js

마땅한 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을 넣으려고(그래서 allowHTMLtrue로 줬습니다), URL 인코딩을 해서 텍스트를 넣었습니다. 그래서 JS에서 디코딩을 한 것입니다.

이상입니다.

안녕하세요. 14년차 풀스택 웹개발자 안형우입니다. 이 블로그에서는 WordPress, PHP, CSS, 사용성, 리눅스 서버 등 풀스택 웹개발에서 마주하는 다양한 문제 상황과 해결책, 필요한 개념들을 다룹니다. 👉 소개


작업물

Leave a Reply

Your email address will not be published. Required fields are marked *