jQuery Tiptip - 툴팁 ( tooltip )
Open API/Jquery2016. 11. 1. 10:07
반응형
툴팁에 대한 플러그인 입니다.
툴팁이란 ?말풍선 또는 툴팁(tooltip)은 공통 그래픽 사용자 인터페이스 요소이다. 마우스 포인터라 불리는 커서와 함께 동작한다. 사용자가 커서에 항목을 클릭하지 않고 가리키면 조그마한 상자가 항목 위에 나타나서 보충 설명을 보여 준다.
API Url : http://code.drewwilson.com/entry/tiptip-jquery-plugin
샘플코드 다운로드 : 
454.7z
옵션 값.
activation: string ("hover" by default) - jQuery method TipTip is activated with. Can be set to: "hover", "focus" or "click".
keepAlive: true of false (false by default) - When set to true the TipTip will only fadeout when you hover over the actual TipTip and then hover off of it.
maxWidth: string ("200px" by default) - CSSmax-widthproperty for the TipTip element. This is a string so you can apply a percentage rule or 'auto'.
edgeOffset: number (3 by default) - Distances the TipTip popup from the element with TipTip applied to it by the number of pixels specified.
defaultPosition: string ("bottom" by default) - Default orientation TipTip should show up as. You can set it to: "top", "bottom", "left" or "right".
delay: number (400 by default) - Number of milliseconds to delay before showing the TipTip popup after youmouseoveran element with TipTip applied to it.
fadeIn: number (200 by default) - Speed at which the TipTip popup will fade into view.
fadeOut: number (200 by default) - Speed at which the TipTip popup will fade out of view.
attribute: string ("title" by default) - HTML attribute that TipTip should pull it's content from.
content: string (false by default) - HTML or String to use as the content for TipTip. Will overwrite content from any HTML attribute.
enter: callback function - Custom function that is run each time youmouseoveran element with TipTip applied to it.
exit: callback function - Custom function that is run each time youmouseoutof an element with TipTip applied to it.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Mangled date examples</title>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="/test/454/jquery.tipTip.js"></script>
<link rel="stylesheet" type="text/css" href="/test/454/tiptip.css"/>
<script type="text/javascript">
$(function(){
$(".someClass").tipTip();
});
</script>
<style type="text/css">
.sample {padding-bottom:20px;}
</style>
</head>
<body>
<div class="sample">
<a href="#" class="someClass" title="요거이 Text">텍스트</a>에다가 타이틀로 넣으면 되구요.
</div>
<div class="sample">
<img src="/files/attach/images/106/893/b0183fae643bfa50ebef8ce046e5abe8.jpg" class="someClass" title="요거이 이미지" style="width:200px;height:150px;"/>
</div>
<div class="sample">
<input class="someClass" title="요거이 인풋" style="width:200px;"/>
</div>
</body>
</html>
댓글()
