jQuery 툴팁
jQuery Tooltip
jQuery Tooltip 플러그인은 기본 도구 설명 상자를 대체하고 사용자 정의할 수 있도록 하며 내용, 위치 및 모양만 조정하면 됩니다.
이 플러그인의 현재 버전은 1.3이며 오랫동안 업데이트되지 않았습니다. jQuery UI 도구 설명을 사용하는 것이 좋습니다.
jQuery UI 도구 설명에 대한 자세한 내용은 API 문서 jQuery UI 도구 설명 위젯을 참조하세요.
시연 예시
jQuery Tooltip 플러그인 시연입니다.
Instance
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery UI Tooltip - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<script>
$(function() {
$( document ).tooltip();
});
</script>
<style>
label {
display: inline-block;
width: 5em;
}
</style>
</head>
<body>
<p><a href="#" title="That's what this widget is">Tooltips</a> can be attached to any element. When you hover
the element with your mouse, the title attribute is displayed in a little box next to the element, just like a native tooltip.</p>
<p>But as it's not a native tooltip, it can be styled. Any themes built with
<a href="http://jqueryui.com/themeroller/" title="ThemeRoller: jQuery UI's theme builder application">ThemeRoller</a>
will also style tooltips accordingly.</p>
<p>Tooltips are also useful for form elements, to show some additional information in the context of each field.</p>
<p><label for="age">Your age:</label><input id="age" title="We ask for your age only for statistical purposes."></p>
<p>Hover the field to see the tooltip.</p>
</body>
</html>인스턴스 실행 »
온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요
