툴팁 Poshy Tip jQuery Plugin

demun
퍼블리셔/jQuery
2011. 12. 21. 06:00

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

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

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

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

jquery.poshytip.min.js

tip-yellowsimple.css

그런다음 jquery 를 인클루드해야 합니다. 이 툴팁도 jquery가 먼저 적용이 되야 합니다. 데모페이지에는 1.4.2를 사용하지만 최신파일도 가능합니다.
현재 jquery의 최신버젼은 1.7.1 버젼입니다.
css 파일도 있으니 그냥 업로드하고 링크만 시키면 되고 이미지도 딱 하나만 있으니 용량이 작습니다.
그것도 같이 업로드후에 코드만 넣어주면 됩니다.
html 편집에서 아래의 코드를 head 사이에 넣어줍니다.

<head>
....
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="./images/jquery.poshytip.min.js"></script>
<link rel="stylesheet" href="./images/tip-yellowsimple.css" type="text/css" />
<script type="text/javascript">       
$(document).ready(function() {
 
// 본문 링크에만 툴팁 적용.
    $('.article a').poshytip({          // .article a는 본문에 해당하는 a링크만 적용한다는 뜻입니다.
        className: 'tip-yellowsimple',  // 툴팁중에서 tip-yellowsimple 테마를 이용한다는 뜻입니다.
        showTimeout: 1,
        alignTo: 'target',
        alignX: 'center',
        offsetY: 5,
        allowTipHover: false
    });     
 
});
</script>
....
</head>

css 파일의 경로까지 똑같으니 이걸로 사용준비는 끝입니다.

간단하죠. JS, CSS 파일 각각 하나씩과 이미지 하나면 업로드후 자바스크립트를 인클루드 하는것만으로 준비는 끝입니다.
그럼 본문의 해당하는 <div class="article">....</div> 안에 있는 a링크에 모두 툴팁이 적용됩니다.

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

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

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

개 개

demun(대문블로그)

툴팁 Poshy Tip jQuery Plugin

티스토리툴바