[스킨 가이드] simple gray 무료버전 - 툴팁 사용법

롤오버시 나타나는 툴팁

simple gray 스킨에는 jquery 로 만들어진 툴팁 기능이 포함되 있습니다.

최근 댓글이나, 트랙백에 마우스를 올려보시면 툴팁이 나타나는걸 확인하실 수 있습니다.

이 툴팁은 링크 뿐만 아니라 텍스트, 이미지에도 적용이 가능합니다.

이번 글에선 툴팁 사용법을 예제와 함께 간단히 소개하겠습니다.

링크

<a href="#" class="tooltip-right" title="툴팁">링크</a>

링크에 tooltip-right 클래스를 지정하고, title 값을 주면 롤오버시 오른쪽에 title 값이 툴팁으로 나타납니다.

텍스트

텍스트에 툴팁 <span class="tooltip-right" title="그렇고 그런 이야기">텍스트</span>

추가

input, textarea, div 등 많은 곳에 툴팁 기능을 사용하실 수 있습니다.

클래스와 타이틀만 지정해주시면 되니까요 ^^

tooltip-right가 있듯이 tooltip-left / tooltip-top / tooltip-bottom 의 속성도 있으니 참고해주세요.

포스트를 작성하실 때도 html 편집 화면에서 툴팁 소스를 입력하시면 사용 가능합니다. skin.html 파일을 수정하셔서 사용하셔도 되구요.

이렇게 원하는 곳에 간단한 소스로 툴팁 기능을 추가하는것도 좋을 것 같습니다.

툴팁 소스 출처 :: http://www.tippedjs.com