jQuery를 사용하여 호버에 도구 설명 메시지 표시
- jQuery-UI 툴팁
-
jQuery를 사용하여 마우스 오버 시 도구 설명 메시지를 표시하려면
options매개변수와 함께tooltip()메서드를 사용하십시오. -
jQuery를 사용하여 마우스를 가져갈 때 도구 설명 메시지를 표시하려면
actions매개변수와 함께tooltip()메서드를 사용하십시오.
도구 설명은 새 테마를 추가하고 사용자 정의를 허용하는 데 사용되는 jQuery-UI의 위젯입니다. 이 튜토리얼은 jQuery-UI 툴팁을 사용하는 방법을 보여줍니다.
jQuery-UI 툴팁
jQuery의 툴팁은 사용자 정의를 허용하고 새 테마를 만드는 데 사용됩니다. 도구 설명은 모든 요소에 첨부됩니다. 그것들을 표시하기 위해 툴팁으로 사용될 제목 속성을 추가합니다.
해당 요소 위로 마우스를 가져가면 title 속성이 있는 도구 설명이 표시됩니다. jQuery-UI는 모든 요소에 툴팁을 추가할 수 있는 tooltip() 메서드를 제공합니다.
tooltip() 메서드는 기본적으로 도구 설명을 표시하거나 숨길 때 페이드 애니메이션을 제공합니다.
이 메서드의 구문은 다음과 같습니다.
Method 1:
$(selector, context).tooltip (options)
Method 2:
$(selector, context).tooltip ("action", [params])
tooltip() 메서드를 사용하는 두 가지 방법이 있습니다.
jQuery를 사용하여 마우스 오버 시 도구 설명 메시지를 표시하려면 options 매개변수와 함께 tooltip() 메서드를 사용하십시오.
options 매개변수가 있는 첫 번째 방법은 도구 설명의 동작과 모양을 지정하는 데 사용됩니다. options 매개변수는 여러 번 삽입할 수 있으며 여러 유형이 있습니다.
아래 표는 옵션 유형을 보여줍니다.
| 옵션 | 설명 |
|---|---|
content |
이 옵션은 title 속성을 반환하는 함수의 기본값으로 도구 설명의 내용을 나타냅니다. |
disabled |
이 옵션은 true 또는 false 값으로 도구 설명을 비활성화하는 데 사용됩니다. |
hide |
이 옵션은 숨길 때 툴팁의 애니메이션을 나타냅니다. 값은 true 또는 false입니다. |
show |
이 옵션은 툴팁을 표시하는 동안의 애니메이션을 나타냅니다. 값은 true 또는 false입니다. |
track |
이 옵션은 도구 설명으로 작업할 때 마우스를 추적합니다. 기본값은 false입니다. |
items |
이 옵션은 툴팁을 표시할 항목을 선택하는 데 사용됩니다. 기본값은 제목입니다. |
position |
이 옵션은 툴팁의 위치를 결정하는 데 사용됩니다. 기본값은 제목 속성을 반환하는 함수입니다. |
tooltip class |
이 옵션은 툴팁에 추가할 수 있는 클래스를 나타냅니다. 경고 또는 오류를 나타낼 수 있습니다. 이 옵션의 기본값은 null입니다. |
먼저 매개변수가 없는 간단한 tooltip() 예제를 시도해 보겠습니다. tooltip() 메서드가 작동할 수 있도록 jQuery-UI를 가져와야 합니다.
예를 참조하십시오.
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>jQuery Tooltip</title>
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel = "stylesheet">
<script>
$(function() {
$("#Demotooltip1").tooltip();
$("#Demotooltip2").tooltip();
});
</script>
</head>
<body>
Type Something: <input id = "Demotooltip1" title = "Please Type Something">
<p><label id = "Demotooltip2" title = "This is tooltip Demo"> Hover Here to See Tooltip </label></p>
</body>
</html>
위의 코드는 텍스트 입력과 레이블에 대한 툴팁을 보여줍니다. 출력 참조:
이제 content, disabled 및 track 옵션을 사용하여 예제를 시도해 보겠습니다.
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>jQuery Tooltip </title>
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script>
$(function() {
$( "#Demotooltip1" ).tooltip({
content: "Tooltip from Content",
track:true
}),
$( "#Demotooltip2" ).tooltip({
disabled: true
});
});
</script>
</head>
<body>
Type Something: <input id = "Demotooltip1" title = "Original">
<br><br>
Disabled Tooltip: <input id = "Demotooltip2" title = "Demotooltip">
</body>
</html>
위의 코드는 content, track 및 disabled 옵션을 사용하는 방법을 보여줍니다. 출력 참조:
position 옵션을 사용하여 한 가지 더 예를 들어 보겠습니다. 예를 참조하십시오.
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>jQuery Tooltip</title>
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<style>
body {
margin-top: 50px;
}
.ui-tooltip-content::after, .ui-tooltip-content::before {
position: absolute;
content: "";
display: block;
left: 100px;
border-style: solid;
}
.ui-tooltip-content::before {
bottom: -5px;
border-width: 5px 5px 0;
border-color: #AAA transparent;
}
.ui-tooltip-content::after {
bottom: -7px;
border-width: 10px 10px 0;
border-color: white transparent;
}
</style>
<script>
$(function() {
$( "#Demotooltip" ).tooltip({
position: {
my: "center bottom",
at: "center top-10",
collision: "none"
}
});
});
</script>
</head>
<body>
Type Something: <input id = "Demotooltip" title = "Please Type Something.">
</body>
</html>
위의 코드는 툴팁에 팁을 추가하는 position 옵션의 데모를 보여줍니다. 출력 참조:
마찬가지로 위의 표에 설명된 목적으로 다른 옵션을 사용할 수 있습니다. 이제 방법 2를 보자.
jQuery를 사용하여 마우스를 가져갈 때 도구 설명 메시지를 표시하려면 actions 매개변수와 함께 tooltip() 메서드를 사용하십시오.
$ (selector, context).tooltip ("action", [params]) 메서드는 예를 들어 도구 설명 비활성화와 같은 요소에 대한 작업을 수행합니다. action은 첫 번째 인수의 문자열을 나타내며 params는 지정된 작업을 기반으로 제공됩니다.
여러 유형의 actions가 있으며 아래 표에 나와 있습니다.
| 동작 | 설명 |
|---|---|
close |
이 작업은 도구 설명을 닫는 데 사용됩니다. 인수가 없습니다. |
destroy |
이 작업은 도구 설명을 완전히 제거합니다. 인수가 없습니다. |
disable |
이 작업은 도구 설명을 비활성화합니다. 인수가 없습니다. |
enable |
이 작업은 도구 설명을 활성화합니다. 인수가 없습니다. |
open |
이 작업은 도구 설명을 프로그래밍 방식으로 엽니다. 인수가 없습니다. |
option() |
이 작업은 현재 도구 설명 옵션 해시를 나타내는 키-값 쌍을 가져옵니다. |
option(Options) |
이 작업은 도구 설명에 대한 옵션을 설정하는 데 사용됩니다. |
option(OptionName) |
이 작업은 OptionName의 값을 가져오는 것입니다. 다른 인수가 없습니다. |
option(OptionName, value) |
이 작업은 주어진 값에 따라 OptionName 값을 설정합니다. |
widget |
이 작업은 원래 요소를 포함하는 jQuery 객체를 반환합니다. 인수가 없습니다. |
버튼을 누르고 다른 버튼을 누를 때 도구 설명을 닫아 도구 설명을 열어 두는 열기 및 닫기 작업에 대한 간단한 예를 시도해 보겠습니다. 예를 참조하십시오.
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>jQuery Tooltip</title>
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script>
$(function() {
$("#Demotooltip").tooltip({
//the 'of' keyword will be used to link the tooltip to the specified input
position: { of: '#DemoInput', my: 'left center', at: 'left center' },
}),
$('#DemoButton1').click(function () {
$('#Demotooltip').tooltip("open");
});
$('#DemoButton2').click(function () {
$('#Demotooltip').tooltip("close");
});
});
</script>
</head>
<body >
<label id = "Demotooltip" title = "Open and Close"></label>
<input id = "DemoInput" type = "text" size = "20" />
<input id = "DemoButton1" type = "submit" value = "Click to Show" />
<input id = "DemoButton2" type = "submit" value = "Click to Hide" />
</body>
</html>
위의 코드는 버튼 클릭 시 툴팁을 열고 닫습니다. 출력 참조:
이제 widget 작업에 대한 예를 시도해 보겠습니다. widget 메소드는 jQuery-UI의 인스턴스를 가져오는 데 사용됩니다.
예를 참조하십시오.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link href= "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet"/>
<script src= "https://code.jquery.com/jquery-1.10.2.js"> </script>
<script src= "https://code.jquery.com/ui/1.10.4/jquery-ui.js"> </script>
<script>
$(function () {
$("#Demo2").tooltip({
track: true,
});
$("#Demo1").click(function () {
var a = $("#Demo2").tooltip("widget");
console.log(a);
});
});
</script>
</head>
<body>
<h1 style="color: lightblue">DELFTSTACK</h1>
<input id="Demo1" type="submit" name="delftstack" value="click" />
<span id="Demo2" title="delftstack"> Click Me</span>
</body>
</html>
위의 코드는 widget 메소드를 사용하여 jQuery-UI의 인스턴스를 가져옵니다. 출력 참조:
마찬가지로 다른 작업도 표에 설명된 목적으로 사용할 수 있습니다.
Sheeraz is a Doctorate fellow in Computer Science at Northwestern Polytechnical University, Xian, China. He has 7 years of Software Development experience in AI, Web, Database, and Desktop technologies. He writes tutorials in Java, PHP, Python, GoLang, R, etc., to help beginners learn the field of Computer Science.
LinkedIn Facebook