HTML5/CSS3 | Tipsy Tutorial

[jQuery] Tipsy Tutorial

웹스터디 / 2012.05.05 04:01 / hit 4,003 추천 0
http://../source/jquery/tipsy/ (676)
tipsy tutorial.zip (3.2K) (2) DATE : 2012-05-05 04:02:24

버튼이나 링크위에 마우스를 올리면 간단히 설명이 표시되는 jQuery Plugin 입니다.

사용법

1. 페이지에 js/css파일 불러오기

<link rel="stylesheet" href="style/tipsy.css" type="text/css">

<script type="text/javascript" src="javascripts/jquery.tipsy.js"></script>

2. 적용하는 페이지에 스크립트 추가

<script type="text/javascript">

//<![CDATA[

$(document).ready(function() {

$('.s-tipsy').tipsy({fade: true, gravity: 's'});

$('.n-tipsy').tipsy({fade: true, gravity: 'n'});

$('.e-tipsy').tipsy({fade: true, gravity: 'e'});

$('.w-tipsy').tipsy({fade: true, gravity: 'w'});

});

//]]>

</script>

3. 선택, 버튼, 링크에 class명을 입력하고 내용을 title에 입력

데모예제보기