jQuery でホバー時にツールチップメッセージを表示する
- jQuery-UI ツールチップ
-
optionsパラメーターを指定したtooltip()メソッドを使用して、jQuery を使用してホバー時にツールチップメッセージを表示する -
actionsパラメーターを指定したtooltip()メソッドを使用して、jQuery を使用してホバー時にツールチップメッセージを表示する
ツールチップは、新しいテーマを追加してカスタマイズできるようにするために使用される jQuery-UI のウィジェットです。このチュートリアルでは、jQuery-UI ツールチップの使用方法を示します。
jQuery-UI ツールチップ
jQuery のツールチップは、カスタマイズを可能にし、新しいテーマを作成するために使用されます。ツールチップは任意の要素にアタッチされます。それらを表示するために、ツールチップとして使用される title 属性を追加します。
その要素にカーソルを合わせると、title 属性を持つツールチップが表示されます。jQuery-UI は、任意の要素にツールチップを追加できるメソッド tooltip() を提供します。
tooltip() メソッドは、ツールチップを表示および非表示にするときに、デフォルトでフェードアニメーションを提供します。
このメソッドの構文は次のとおりです。
Method 1:
$(selector, context).tooltip (options)
Method 2:
$(selector, context).tooltip ("action", [params])
tooltip() メソッドを使用するには 2つの方法があります。
options パラメーターを指定した tooltip() メソッドを使用して、jQuery を使用してホバー時にツールチップメッセージを表示する
options パラメータを使用する最初のメソッドは、ツールチップの動作と外観を指定するために使用されます。パラメータ options は複数回挿入でき、複数のタイプがあります。
次の表は、オプションのタイプを示しています。
| オプション | 説明 |
|---|---|
content |
このオプションは、ツールチップのコンテンツを関数のデフォルト値で表し、title 属性を返します。 |
disabled |
このオプションは、true または false の値でツールチップを無効にするために使用されます。 |
hide |
このオプションは、ツールチップを非表示にしたときのツールチップのアニメーションを表します。値は true または false です。 |
show |
このオプションは、ツールチップを表示しているときのアニメーションを表します。値は true または false です。 |
track |
このオプションは、ツールチップを操作するときにマウスを追跡します。デフォルト値は false です。 |
items |
このオプションは、ツールチップを表示するアイテムを選択するために使用されます。デフォルト値は title です |
position |
このオプションは、ツールチップの位置を決定するために使用されます。デフォルト値は、title 属性を返す関数です。 |
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 を使用してもう 1つの例を試してみましょう。例を参照してください：
<!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 を見てみましょう。
actions パラメーターを指定した tooltip() メソッドを使用して、jQuery を使用してホバー時にツールチップメッセージを表示する
メソッド $ (selector, context).tooltip ("action", [params]) は、ツールチップを無効にするなど、要素に対してアクションを実行します。action は最初の引数の文字列を表し、params は指定されたアクションに基づいて提供されます。
アクションには複数のタイプがあり、以下の表に示されています。
| アクション | 説明 |
|---|---|
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 メソッドは、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