자바스크립트이야기/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 화면
네이버이동 문구에 마우스 오버시켜보기
다음이동 문구에 마우스 오버시켜보기