[해피CGI][cgimall] Simple Customizable jQuery Tooltip Plugin - GetTip

웹페이지에 간단하게 툴팁을 추가할수 있는 스크립트 입니다.

다운로드 받은 파일의 압축을 해제한 후 
example/GetTip Example #1.html 라는 HTML문서를 
웹브라우저로 열어보면 확인이 가능합니다.

마우스 오버시 상하좌우 어느쪽에 툴팁을 표시할것인지 정할수 있고,
얼마나 오랫동안 오버를 해야 나오는지
툴팁이 나온후에 어느 정도 유지하는지 시간을 제어할수가 있습니다.

마우스를 오버하거나,
입력박스에 포커스를 주거나,
특정 버튼을 클릭하거나 했을때
화면에 툴팁을 추가할 수 있습니다.

특정 객체에 툴팁을 추가하는 방법이 생각보다는 쉽네요.

HTML 태그를 이용해서,


1. jquery 를 사용할 수 있게 추가하고,
2. js/jquery.gettip.js 를 이용하도록 추가합니다.

3. 툴팁이 표시되어야 할 객체에

 

data-tooltop="옵션을지정"  하고,
title 에는 툴팁으로 표시되는 텍스트를 추가합니다.


4. 툴팁을 작동시키기 위한 자바스크립트를 추가합니다.

5. 툴팁을 제어할수 있는 옵션들은 아래를 참고하면 되겠습니다.