[jquery] 페이스북 스타일 툴팁 happycgi

회원가입

출석체크

마이페이지

CGIMALL

jquery , CSS , PHP , Javascript , 무료폰트 , ASP

홈 > JAVASCRIPT > javascript 소스창고 > 텍스트효과 > [jquery] 페이스북 스타일 툴팁 상세정보

클라우드태그

javascript

PHP

css

html

ASP

API

jquery

mysql

image

Mobile

slide

게시판

메뉴

현재접속자 12명

[jquery] 페이스북 스타일 툴팁

해피팀

네티즌

소스분류

텍스트효과

다운로드 횟수

294 회

간단설명

페이스북 스타일 툴팁 예제와 소스

평가하기

그림과 같은 페이스북 스타일의 툴팁 입니다.

소스 파일의 압축을 푸시면
스타일시트 : tipsy.css
jquery 파일 : jquery-1.3.2.min.js
이미지 : tipsy.gif
툴팁 스크립트 : jquery.tipsy.js

이렇게 나타납니다.

일단

<script src="assets/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="script/jquery.tipsy.js" type="text/javascript"></script>

위의 스크립트를 <head></head> 사이에 정의 합니다.

그리고 난 후

<script type='text/javascript'>
$(function() {
$('#example-1').tipsy();
});
</script>

위와 같이 스크립트 도 넣어주고 난 후

<a id='example-1' href='#' title='Hello World'>Hover over me</a>

이렇게 이용하시면 됩니다.

example-1 가 ID 값으로 동일하게 넣어주고 title 값은 툴팁으로 노출되는 값입니다.

이렇게 이해하시고
http://onehackoranother.com/projects/jquery/tipsy/
위의 사이트에서 몇가지 예제를 참고하시면
쉽게 이해가 되실껍니다.