[tooltip] JQuery-ui.js, 요소 tooltip 생성부터 커스텀까지

 

 

특정요소 mouseover 이벤트를 감지하여 tooltip을 표출하는 작업을 진행하기에 앞서, 'tooltip관련 라이브러리가 없을리가 없는데?'하는 내면의 질문에서 출발하였다. 역시 직접 생성해내는 것 보다, 만들어진 라이브러리를 활용하는게 가장 빠르고 편한 것 같다. 관련 라이브러리는 Bootstrab, JQuery-ui로 두 개의 검색 결과가 있었으나, 본인의 경우 JQuery-ui를 활용하여 tooltip을 생성하고, 그에 대한 내용을 포스팅할 예정이다.

 

https://jqueryui.com/tooltip/

Tooltip | jQuery UI

사실 위 공식 홈페이지에서 필요한 버전의 api문서를 참고하여, 위젯별 기능을 커스텀 하는것이 가장 정확하고 바람직하다. 하지만 영어이기에 약간의 기피감이 드는 것이 사실이므로, 버전 업그레이드에도 유지가 되는 기본적인 부분에 대한 활용법만 간단히 다루어 포스팅 하였다.

 

 

목차는 아래와 같다.

1. 필요 파일 첨부
2. tooltip 기본 표출
3. tooltip 커스텀

 

 

 

---

 

 

1. 필요 파일 첨부

각 JQuery, JQuery-ui의 스타일 및 js코드를 첨부해 주어야한다. 해당 포스팅에서는 아래의 코드를 html <header>태그 내에 추가하는 방식을 추천한다.

  <link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
  <script src="https://code.jquery.com/jquery-3.6.0.js"></script>
  <script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>

 

작업 환경이 폐쇠망이냐 인터넷망이냐에 따라 첨부 방법이 달라질텐데, 라이브러리 첨부 시 기본 원리는 유사하니 아래 링크를 통해 여러 종류의 라이브러리 첨부 방법을 알아두는 것이 도움될 것이다. 

https://gkawjdgml.tistory.com/63

jQuery의 사용(연결방법 포함)

 

 

브라우저의 개발자도구를 활용하여 정상적으로 파일이 참조 되었는지 확인할 수 있다.

(좌)js / (우)css

 

 

---

 

 

2. tooltip 기본 표출

단순히 tooltip()메서드 만으로 기본 tooltip을 표출할 수 있다.

See the Pen custom tooltip by HamJeong (@HamJeong) on CodePen.

 

 

---

 

 

3. tooltip 커스텀

툴팁의 최대 넓이를 지정하거나, 배경 및 폰트 색상을 바꾸는 등 툴팁의 기본 클래스명을 지정하여 아래와 같이 설정을 변경할 수 있다.

See the Pen basic tooltip by HamJeong (@HamJeong) on CodePen.

 

근데 왜 툴팁 관련 style코드를 굳이 html단락 내부에 작성해야만 효과가 듣는지는 모르겠다. codepen에서만 이러는건지는 확인 안됨 ^^

 

---

 

 

위 내용을 활용하여 아래와 같은 효과를 구현했다.