HOWTO · jQuery
jQuery でホバー時にツールチップメッセージを表示する
このチュートリアルでは、jQuery-UI でツールチップを使用して、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 のインスタンスを取得します。出力を参照してください：
同様に、他のアクションも表に記載されている目的で使用できます。
