자바스크립트이야기/jQuery UI 소개

jQueryUI tooltip함수를 이용하여 영역에 포커스 발생시 말풍선을 띄우기

개발로짜 2014. 6. 20. 13:10


툴팁이란?


마우스를 해당 이미지화면이나 특정 대상에 가져다 놓으면 해당 대상에 대한  세부 설명이 나오는 것




스크립트 코드


$(function(){
	$( document ).tooltip();
})


스크립트는 한줄이면 되는애 기존처럼 id를 생성하는게 아니라 document에  주었다.

documnet에 주면 body페이지 모든 태그중 title이란 속성값이 존재하는 태그들에 마우스를 올려놓으면 툴팁기능이 동작하는것이다.


html 코드


툴팁 테스트입니다.<br/>
<a href="http://www.naver.com" title="네이버사이트로 가는링크">네이버이동</a><br/><br/><br/><br/>
<a href="http://www.daum.net" title="다음으로 가봅시다">다음이동</a>


툴팁에 대해서는 별다른 설명이 필요없을거 같다. 

실행화면으로 마무리 하겠음.



실행화면



onload 화면




네이버이동 문구에 마우스 오버시켜보기



다음이동 문구에 마우스 오버시켜보기