대문블로그

티스토리에서 툴팁기능을 사용해보기.
물론 티스토리가 아니더라도 툴팁기능을 이용할 수 있습니다. 또 툴팁을 사용하는 기능은 여러가지가 있습니다. 그중 제가 html5로 마크업하면서 괜찮다고 생각되는 툴팁 플러그인이 있어 소개하고 적용하는 방법을 알려드릴려고 합니다.

이름하여 Poshy Tip jQuery Plugin 입니다.
이는 jQuery 를 사용해야 합니다.
아주 많은 기능이 있습니다. Poshy Tip jQuery Plugin 의 데모페이지를 보시면 다양한 기능을 알수 있습니다.
여기서는 Poshyd의 툴팁기능중 하나만 적용해보면 나머지는 자동으로 알수 있으니 우선 한가지만 적용하는 방법을 알려드립니다. 나머지 기능은 다 같으니 얼마든지 응용가능합니다.

먼저 관련 파일을 다운로드 하세요. 다음 다운로드 링크는 홈페이지의 다운로드 링크입니다. 현재 1.1버젼이 최신버젼입니다.
홈페이지 가기
poshytip-1.1zip 다운로드

티스토리에 적용하는 방법을 알려드리겠습니다.
다운로드해서 파일을 열어보면 데모페이지와 css,js등 파일이 많이 있습니다. 하지만 정작 필요한것은 poshytip.js 하나입니다. 그중에서 압축된것을 사용하는것이 좋습니다.
아래의 파일을 스킨편집에서 업로드 하세요.

그런다음 jquery 를 인클루드해야 합니다. 이 툴팁도 jquery가 먼저 적용이 되야 합니다. 데모페이지에는 1.4.2를 사용하지만 최신파일도 가능합니다.
현재 jquery의 최신버젼은 1.7.1 버젼입니다.
css 파일도 있으니 그냥 업로드하고 링크만 시키면 되고 이미지도 딱 하나만 있으니 용량이 작습니다.
그것도 같이 업로드후에 코드만 넣어주면 됩니다.
html 편집에서 아래의 코드를  head 사이에 넣어줍니다.
간단하죠. JS, CSS 파일 각각 하나씩과 이미지 하나면 업로드후 자바스크립트를 인클루드 하는것만으로 준비는 끝입니다.
그럼 본문의 해당하는 <div class="article">....</div> 안에 있는 a링크에 모두 툴팁이 적용됩니다.

참고로 아래 이미지를 보시면 툴팁이 어떤식으로 적용되는지 알 수 있습니다.

또 poshytip 툴팁은 a링크의 title가 툴팁으로 보입니다.
다른테마을 적용하려면 해당 css 와 이미지를 업로드하고 위의 코드중에서 인클루드하는 파일명만 변경해주시면 됩니다.
또 className: 'tip-yellowsimple', 에서 클래스명만 변경해주시면 다른것도 이용이 가능합니다.

제가 많은 툴팁중에서 이걸 소개하는 이유는 일단 html5에서도 무리없이 잘 된다는 점입니다. 물론 다른 툴팁도 있겠지만요....