JqueryUI-ツールチップ

jQueryUIのツールチップウィジェットは、ネイティブのツールチップを置き換えます。このウィジェットは新しいテーマを追加し、カスタマイズを可能にします。まず、ツールチップが何であるかを理解しましょう。ツールチップはどの要素にも付けることができます。ツールチップを表示するには、_title_属性を入力要素に追加するだけで、タイトル属性値がツールチップとして使用されます。マウスで要素をホバーすると、要素の隣の小さなボックスにタイトル属性が表示されます。

jQueryUIは、ツールチップを表示する任意の要素にツールチップを追加するための* tooltip（）*メソッドを提供します。これは、可視性を切り替えるだけの場合と比較して、ツールチップの表示と非表示を切り替えるフェードアニメーションをデフォルトで提供します。

構文

tooltip（）*メソッドは2つの形式で使用できます-
link：/jqueryui/jqueryui_tooltip＃tooltip_options [$（selector、context）.tooltip（options）]メソッド
link：/jqueryui/jqueryui_tooltip＃tooltip_methods [$（selector、context）.tooltip（ "action"、[params]）]メソッド

[tooltip_options]#

$（セレクター、コンテキスト）.tooltip（オプション）メソッド

ツールチップ（オプション）オプション

構文

$(selector, context).tooltip(options);

Javascriptオブジェクトを使用して、一度に1つ以上のオプションを提供できます。提供する複数のオプションがある場合は、次のようにカンマを使用してそれらを分離します-

$(selector, context).tooltip({option1: value1, option2: value2..... });

次の表は、この方法で使用できるさまざまな_オプション_を示しています-


$(".selector").tooltip(
   { content: "Some content!" }
);
$(".selector").tooltip(
   { disabled: true }
);
$(".selector").tooltip(
   { hide: { effect: "explode", duration: 1000 } }
);
$(".selector").tooltip(
   { items: "img[alt]" }
);
$(".selector").tooltip(
   { { my: "left top+15", at: "left bottom", collision: "flipfit" } }
);
$(".selector").tooltip(
   { show: { effect: "blind", duration: 800 } }
);
$(".selector").tooltip(
   { tooltipClass: "custom-tooltip-styling" } }
);
$(".selector").tooltip(
   { track: true }
);

次のセクションでは、ツールチップ機能のいくつかの実用例を示します。

デフォルトの機能

次の例は、* tooltip（）*メソッドにパラメーターを渡さないツールチップ機能の簡単な例を示しています。

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Tooltip functionality</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>

      <!-- Javascript -->
      <script>
         $(function() {
            $("#tooltip-1").tooltip();
            $("#tooltip-2").tooltip();
         });
      </script>
   </head>

   <body>
      <!-- HTML -->
      <label for = "name">Name:</label>
      <input id = "tooltip-1" title = "Enter You name">
      <p><a id = "tooltip-2" href = "#" title = "Nice tooltip">
         I also have a tooltip</a></p>
   </body>
</html>

上記のコードをHTMLファイル tooltipexample に保存して、JavaScriptをサポートする標準のブラウザーで開きます。次の出力も表示されるはずです。今、あなたは結果で遊ぶことができます-

上記の例では、上のリンクにカーソルを合わせるか、Tabキーを使用して各要素にフォーカスを移動します。

コンテンツの使用、追跡、および無効化

次の例は、JqueryUIのツールヒント関数での3つの重要なオプション*（a）content（b）track および（c）disabled *の使用法を示しています。

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Tooltip functionality</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>

      <!-- Javascript -->
      <script>
         $(function() {
            $( "#tooltip-3" ).tooltip({
               content: "<strong>Hi!</strong>",
               track:true
            }),
            $( "#tooltip-4" ).tooltip({
               disabled: true
            });
         });
      </script>
   </head>

   <body>
      <!-- HTML -->
      <label for = "name">Message:</label>
      <input id = "tooltip-3" title = "tooltip"><br><br><br>
      <label for = "name">Tooltip disabled for me:</label>
      <input id = "tooltip-4" title = "tooltip">
   </body>
</html>

上記のコードをHTMLファイル tooltipexample に保存して、JavaScriptをサポートする標準のブラウザーで開きます。次の出力も表示されるはずです。今、あなたは結果で遊ぶことができます-

上記の例では、最初のボックスのツールチップのコンテンツは、_content_オプションを使用して設定されます。また、ツールチップがマウスに追従していることもわかります。 2番目の入力ボックスのツールチップは無効になっています。

ポジションの使用

次の例は、JqueryUIのツールヒント関数でオプション position を使用する方法を示しています。

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Tooltip functionality</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>

      <!-- CSS -->
      <style>
         body {
            margin-top: 100px;
         }

         .ui-tooltip-content::after, .ui-tooltip-content::before {
            content: "";
            position: absolute;
            border-style: solid;
            display: block;
            left: 90px;
         }
         .ui-tooltip-content::before {
            bottom: -10px;
            border-color: #AAA transparent;
            border-width: 10px 10px 0;
         }
         .ui-tooltip-content::after {
            bottom: -7px;
            border-color: white transparent;
            border-width: 10px 10px 0;
         }
      </style>

      <!-- Javascript -->
      <script>
         $(function() {
            $( "#tooltip-7" ).tooltip({
               position: {
                  my: "center bottom",
                  at: "center top-10",
                  collision: "none"
               }
            });
         });
      </script>
   </head>

   <body>
      <!-- HTML -->
      <label for = "name">Enter Date of Birth:</label>
      <input id = "tooltip-7" title = "Please use MM.DD.YY format.">
   </body>
</html>

上記のコードをHTMLファイル tooltipexample に保存して、JavaScriptをサポートする標準のブラウザーで開きます。次の出力も表示されるはずです。今、あなたは結果で遊ぶことができます-

上記の例では、ツールチップの位置は入力ボックスの上に設定されています。

[tooltip_methods]#

$（セレクター、コンテキスト）.tooltip（ "action"、[params]）メソッド

_tooltip（action、params）_メソッドは、ツールチップの無効化など、ツールチップ要素に対してアクションを実行できます。 action は最初の引数で文字列として指定され、オプションで、指定されたアクションに基づいて1つ以上の params を提供できます。

'_基本的に、ここでのアクションは何もありませんが、文字列の形で使用できるjQueryメソッドです。_

構文

$(selector, context).tooltip ("action", [params]);

次の表は、このメソッドのアクションを示しています-


$(".selector").tooltip("close");
$(".selector").tooltip("destroy");
$(".selector").tooltip("disable");
$(".selector").tooltip("enable");
$(".selector").tooltip("open");
var isDisabled = $( ".selector" ).tooltip( "option", "disabled" );
$(".selector").tooltip("option");
$( ".selector" ).tooltip( "option", "disabled", true );
$( ".selector" ).tooltip( "option", { disabled: true } );
$(".selector").tooltip("widget");

例

ここで、上の表のアクションを使用した例を見てみましょう。次の例は、アクション_disable_および_enable_の使用方法を示しています。

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Tooltip functionality</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>

      <!-- Javascript -->
      <script>
         $(function() {
            $("#tooltip-8").tooltip({
              //use 'of' to link the tooltip to your specified input
               position: { of: '#myInput', my: 'left center', at: 'left center' },
            }),
            $('#myBtn').click(function () {
               $('#tooltip-8').tooltip("open");
            });
         });
      </script>
   </head>

   <body style = "padding:100px;">
      <!-- HTML -->
      <a id = "tooltip-8" title = "Message" href = "#"></a>
      <input id = "myInput" type = "text" name = "myInput" value = "0" size = "7"/>
      <input id = "myBtn" type = "submit" name = "myBtn" value = "myBtn" class = "myBtn"/>
   </body>
</html>

上記のコードをHTMLファイル tooltipexample に保存して、JavaScriptをサポートする標準のブラウザで開きます。次の出力も表示されるはずです-

上記の例では、_myBtn_ボタンをクリックすると、ツールチップがポップアップ表示されます。

ツールチップ要素のイベント管理

前のセクションで見たツールヒント（オプション）メソッドに加えて、JqueryUIは特定のイベントに対してトリガーされるイベントメソッドを提供します。これらのイベントメソッドは以下のとおりです-

Sr.No. Event Method & Description

1

create(event, ui)

ツールチップが作成されたときにトリガーされます。ここで、_event_は_Event_型であり、_ui_は_Object_型です。

イベント-create（event、ui）

ツールチップが作成されたときにトリガーされます。ここで、_event_は_Event_型であり、_ui_は_Object_型です。

構文

$(".selector").tooltip(
   create: function(event, ui) {}
);

2

close(event, ui)

ツールチップが閉じられたときにトリガーされます。通常、_focusout_または_mouseleave_でトリガーします。ここで、_event_は_Event_型であり、_ui_は_Object_型です。

イベント-close（event、ui）

ツールチップが閉じられたときにトリガーされます。通常、_focusout_または_mouseleave_でトリガーします。ここで、_event_は_Event_型であり、_ui_は_Object_型です。 _ui_の可能な値は-

tooltip -生成されたツールチップ要素。

構文

$(".selector").tooltip(
   close: function(event, ui) {}
);

3

open(event, ui)

ツールチップが表示または表示されたときにトリガーされます。通常、_focusin_または_mouseover_でトリガーされます。ここで、_event_は_Event_型であり、_ui_は_Object_型です。

イベント-open（event、ui）

ツールチップが表示または表示されたときにトリガーされます。通常、_focusin_または_mouseover_でトリガーされます。 _event_は_Event_型であり、_ui_は_Object_型です。_ui_の可能な値は-

tooltip -生成されたツールチップ要素。

構文

$(".selector").tooltip(
   open: function(event, ui) {}
);

例

次の例は、ツールチップ機能中のイベントメソッドの使用方法を示しています。この例は、_open_および_close_イベントの使用を示しています。

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Tooltip functionality</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>

      <!-- Javascript -->
      <script>
         $(function() {
            $('.tooltip-9').tooltip({
               items: 'a.tooltip-9',
               content: 'Hello welcome…',
               show: "slideDown",//show immediately
               open: function(event, ui) {
                  ui.tooltip.hover(
                  function () {
                     $(this).fadeTo("slow", 0.5);
                  });
               }
            });
         });
         $(function() {
            $('.tooltip-10').tooltip({
               items: 'a.tooltip-10',
               content: 'Welcome to finddevguides…',
               show: "fold",
               close: function(event, ui) {
                  ui.tooltip.hover(function() {
                     $(this).stop(true).fadeTo(500, 1);
                  },
                  function() {
                     $(this).fadeOut('500', function() {
                        $(this).remove();
                     });
                  });
               }
            });
         });
      </script>
   </head>

   <body style = "padding:100px;">
      <!-- HTML -->
      <div id = "target">
         <a href = "#" class = "tooltip-9">Hover over me!</a>
         <a href = "#" class = "tooltip-10">Hover over me too!</a>
      </div>
   </body>
</html>

上記のコードをHTMLファイル tooltipexample に保存して、JavaScriptをサポートする標準のブラウザで開きます。次の出力も表示されるはずです-

上記の例では、_Hover over me！_のツールチップはすぐに消えますが、_Hover over me！_のツールチップは1000ミリ秒後に消えます。

Sr.No.	Option & Description
1	content このオプションは、ツールチップのコンテンツを表します。デフォルトでは、その値は* title属性を返す関数です。オプション-コンテンツ* このオプションは、ツールチップのコンテンツを表します。デフォルトでは、その値は* title属性を返す関数です。これはタイプにすることができます- 関数-コールバックは、コンテンツを直接返すか、最初の引数を呼び出してコンテンツを渡すことができます。 Ajaxコンテンツ用。 String* -ツールチップのコンテンツに使用するHTMLの文字列。構文 `$(".selector").tooltip( { content: "Some content!" } );`
2	disabled このオプションを_true_に設定すると、ツールチップが無効になります。デフォルトでは、その値は false です。オプション-無効このオプションを_true_に設定すると、ツールチップが無効になります。デフォルトでは、その値は false です。構文 `$(".selector").tooltip( { disabled: true } );`
3	hide このオプションは、ツールチップを非表示にするときのアニメーション効果を表します。デフォルトでは、その値は true です。オプション-非表示このオプションは、ツールチップを非表示にするときのアニメーション効果を表します。デフォルトでは、その値は true です。これはタイプにすることができます- ブール-これは_true_または_false_になります。 _true_に設定すると、ツールヒントはデフォルトの継続時間とデフォルトのイージングでフェードアウトします。 Number -ツールチップは、指定された期間とデフォルトのイージングでフェードアウトします。 String -ツールチップは、_ "slideUp"、 "fold" _などの指定された効果を使用して非表示になります。オブジェクト-可能な値は、effect、delay、duration、、および_easing_です。構文 `$(".selector").tooltip( { hide: { effect: "explode", duration: 1000 } } );`
4	items このオプションは、ツールチップを表示できるアイテムを示します。デフォルトでは、その値は [title] です。オプション-アイテムこのオプションは、ツールチップを表示できるアイテムを示します。デフォルトでは、その値は [title] です。構文 `$(".selector").tooltip( { items: "img[alt]" } );`
5	position このオプションは、関連するターゲット要素に対するツールチップの位置を決定します。デフォルトでは、その値は* title属性を返す関数です。可能な値は次のとおりです。my、at、of、collision、using、within.* オプション-位置このオプションは、関連するターゲット要素に対するツールチップの位置を決定します。デフォルトでは、その値は* title属性を返す関数です。可能な値は次のとおりです。my、at、of、collision、using、within.* 構文 `$(".selector").tooltip( { { my: "left top+15", at: "left bottom", collision: "flipfit" } } );`
6	show このオプションは、ツールチップの表示をアニメーション化する方法を表します。デフォルトでは、その値は true です。オプション-表示このオプションは、ツールチップの表示をアニメーション化する方法を表します。デフォルトでは、その値は true です。これはタイプにすることができます- ブール-これは_true_または_false_になります。 _true_に設定すると、ツールヒントはデフォルトの継続時間とデフォルトのイージングでフェードアウトします。 Number -ツールチップは、指定された期間とデフォルトのイージングでフェードアウトします。 String -ツールチップは、_ "slideUp"、 "fold" _などの指定された効果を使用して非表示になります。オブジェクト-可能な値は、effect、delay、duration、、および_easing_です。構文 `$(".selector").tooltip( { show: { effect: "blind", duration: 800 } } );`
7	tooltipClass このオプションは、警告やエラーなどのツールチップのツールチップウィジェットに追加できるクラスです。デフォルトでは、その値は null です。オプション-tooltipClass * このオプションは、警告やエラーなどのツールチップのツールチップウィジェットに追加できるクラスです。デフォルトでは、その値は null です。構文 `$(".selector").tooltip( { tooltipClass: "custom-tooltip-styling" } } );`
8	track このオプションを_true_に設定すると、ツールチップはマウスを追跡/追跡します。デフォルトでは、その値は false です。オプション-追跡このオプションを_true_に設定すると、ツールチップはマウスを追跡/追跡します。デフォルトでは、その値は false です。構文 `$(".selector").tooltip( { track: true } );`

Sr.No.	Action & Description
1	close() このアクションは、ツールチップを閉じます。このメソッドは引数を取りません。アクション-close（）このアクションは、ツールチップを閉じます。このメソッドは引数を取りません。構文 `$(".selector").tooltip("close");`
2	destroy() このアクションにより、ツールチップ機能が完全に削除されます。これにより、要素は初期化前の状態に戻ります。このメソッドは引数を取りません。アクション-destroy（）このアクションにより、ツールチップ機能が完全に削除されます。これにより、要素は初期化前の状態に戻ります。このメソッドは引数を取りません。構文 `$(".selector").tooltip("destroy");`
3	disable() このアクションはツールチップを無効にします。このメソッドは引数を取りません。アクション-disable（）このアクションはツールチップを無効にします。このメソッドは引数を取りません。構文 `$(".selector").tooltip("disable");`
4	enable() このアクションにより、ツールチップがアクティブになります。このメソッドは引数を取りません。アクション-enable（）このアクションにより、ツールチップがアクティブになります。このメソッドは引数を取りません。構文 `$(".selector").tooltip("enable");`
5	open() このアクションは、プログラムでツールチップを開きます。このメソッドは引数を取りません。アクション-open（）このアクションは、プログラムでツールチップを開きます。このメソッドは引数を取りません。構文 `$(".selector").tooltip("open");`
6	option( optionName ) このアクションは、ツールチップの_optionName_に関連付けられた値を取得します。このメソッドは引数を取りません。アクション-option（optionName）このアクションは、ツールチップの_optionName_に関連付けられた値を取得します。このメソッドは引数を取りません。構文 `var isDisabled = $( ".selector" ).tooltip( "option", "disabled" );`
7	option() このアクションは、現在のツールチップオプションハッシュを表すキー/値ペアを含むオブジェクトを取得します。このメソッドは引数を取りません。アクション-option（）このアクションは、現在のツールチップオプションハッシュを表すキー/値ペアを含むオブジェクトを取得します。このメソッドは引数を取りません。構文 `$(".selector").tooltip("option");`
8	option( optionName, value ) このアクションは、指定された_optionName_に関連付けられたツールヒントオプションの値を設定します。アクション-option（optionName、value）このアクションは、指定された_optionName_に関連付けられたツールヒントオプションの値を設定します。構文 `$( ".selector" ).tooltip( "option", "disabled", true );`
9	option( options ) このアクションは、ツールチップの1つ以上のオプションを設定します。アクション-オプション（オプション）このアクションは、ツールチップの1つ以上のオプションを設定します。構文 `$( ".selector" ).tooltip( "option", { disabled: true } );`
10	widget() このアクションは、元の要素を含むjQueryオブジェクトを返します。このメソッドは引数を取りません。アクション-ウィジェット（）このアクションは、元の要素を含むjQueryオブジェクトを返します。このメソッドは引数を取りません。構文 `$(".selector").tooltip("widget");`

Jqueryui-tooltip

目次

JqueryUI-ツールチップ

構文

$（セレクター、コンテキスト）.tooltip（オプション）メソッド

構文

デフォルトの機能

コンテンツの使用、追跡、および無効化

ポジションの使用

$（セレクター、コンテキスト）.tooltip（ "action"、[params]）メソッド

構文

例

ツールチップ要素のイベント管理

例