jQueryのUIの例 - ツールチップボックス（ツールチップ）

カスタマイズ可能な、themableツールチップボックス、ネイティブツールヒントボックスを交換してください。

ツールチップのメンバーの詳細については、APIドキュメントを参照してください。ツールチップボックス部材を（ウィジェットをツールチップ）。

デフォルトの機能

リンクにカーソルを合わせる、または各要素にフォーカスを循環するために、Tabキーを使用。

<！DOCTYPE HTML>
<HTML LANG = "EN">
<ヘッド>
  <メタ文字セット= "UTF-8">
  <タイトル> jQueryのUIのツールチップボックス（ツールチップ） - デフォルトの機能</タイトル>
  <リンクのrel = "スタイルシート"のhref = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <SCRIPT SRC = "// code.jquery.com/jquery-1.9.1.js"> </スクリプト>
  <SCRIPT SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </スクリプト>
  <リンクのrel = "スタイルシート"のhref = "http://jqueryui.com/resources/demos/style.css">
  <スクリプト>
  $（関数（）{
    $（ドキュメント）.tooltip（）;
  }）;
  </スクリプト>
  <スタイル>
  ラベル{
    表示：インラインブロック;
    幅：5em。
  }
  </スタイル>
</ HEAD>
<ボディ>
 
<P> <a href="#"title="部件的名称">ツールチップ</a>のそれは任意の要素にバインドすることができます。 あなたが要素の上に置くと、タイトルプロパティは、ツールチップボックスなどのネイティブのように、次の要素への小さなボックスに表示されます。 </ P>
<P>しかし、それはスタイルを定義することができるので、それがネイティブのツールチップボックスではありませんので。 <a href="http://themeroller.com" title="ThemeRoller:jQuery UI的主题创建应用程序">ThemeRollerの</a>に作成されたことにより、テーマもそれに応じて、ツールチップボックスのスタイルを定義することができます。 </ P>
<P>ツールチップボックスは、各領域にいくつかの追加情報を表示するための要素を形成するために使用することができます。 </ P>
<P> <ラベル= "年齢">あなたの年齢：</ label>は<入力のid = "年齢"タイトル= "年齢のみが統計的に使用されます。"> </ P>
<P>ツールチップボックスを表示するには、対応する領域の上にホバー。 </ P>
 
 
</ BODY>
</ HTML>

カスタムスタイル

リンクにカーソルを合わせる、または各要素にフォーカスを循環するために、Tabキーを使用。

<！DOCTYPE HTML>
<HTML LANG = "EN">
<ヘッド>
  <メタ文字セット= "UTF-8">
  <タイトル> jQueryのUIのツールチップボックス（ツールチップ） - カスタムスタイル</タイトル>
  <リンクのrel = "スタイルシート"のhref = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <SCRIPT SRC = "// code.jquery.com/jquery-1.9.1.js"> </スクリプト>
  <SCRIPT SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </スクリプト>
  <リンクのrel = "スタイルシート"のhref = "http://jqueryui.com/resources/demos/style.css">
  <スクリプト>
  $（関数（）{
    $（ドキュメント）.tooltip（{
      位置：{
        私：「中央下部-20」、
        時：「中央上」、
        使用して：機能（位置、フィードバックを）{
          $（この）の.css（位置）;
          $（ "<DIV>"）
            .addClass（「矢印」）
            .addClass（feedback.vertical）
            .addClass（feedback.horizontal）
            .appendTo（この）;
        }
      }
    }）;
  }）;
  </スクリプト>
  <スタイル>
  .ui-ツールチップ、.arrow：{の後に
    背景：黒;
    ボーダー：2ピクセル白色の固体;
  }
  .ui-ツールヒント{
    パディング：10pxの20ピクセル;
    色：白;
    国境半径：20ピクセル;
    フォント：太字14px「ヘルベチカノイエ」、サンセリフ;
    テキスト変換：大文字;
    ボックスシャドウ：0 0 7pxブラック;
  }
  .arrow {
    幅：70ピクセル;
    高さ：16pxに;
    オーバーフロー：隠されました;
    位置：絶対;
    左：50％;
    margin-left：-35px;
    ボトム：-16px;
  }
  .arrow.top {
    トップ：-16px;
    ボトム：自動;
  }
  .arrow.left {
    左：20％;
  }
  .arrow：後の{
    内容： "";
    位置：絶対;
    左：20ピクセル;
    トップ：-20px;
    幅：25ピクセル;
    高さ：25ピクセル;
    ボックスシャドウ：6px 5pxの9px -9pxブラック;
    -webkit-変換：回転（45deg）。
    -moz-変換：回転（45deg）。
    -ms-変換：回転（45deg）。
    -o-変換：回転（45deg）。
    tranform：回転（45deg）。
  }
  .arrow.top：後の{
    ボトム：-20px;
    トップ：自動;
  }
  </スタイル>
</ HEAD>
<ボディ>
 
<P> <a href="#"title="部件的名称">ツールチップ</a>のそれは任意の要素にバインドすることができます。 あなたが要素の上に置くと、タイトルプロパティは、ツールチップボックスなどのネイティブのように、次の要素への小さなボックスに表示されます。 </ P>
<P>しかし、それはスタイルを定義することができるので、それがネイティブのツールチップボックスではありませんので。 <a href="http://themeroller.com" title="ThemeRoller:jQuery UI的主题创建应用程序">ThemeRollerの</a>に作成されたことにより、テーマもそれに応じて、ツールチップボックスのスタイルを定義することができます。 </ P>
<P>ツールチップボックスは、各領域にいくつかの追加情報を表示するための要素を形成するために使用することができます。 </ P>
<P> <ラベル= "年齢">あなたの年齢：</ label>は<入力のid = "年齢"タイトル= "年齢のみが統計的に使用されます。"> </ P>
<P>ツールチップボックスを表示するには、対応する領域の上にホバー。 </ P>
 
 
</ BODY>
</ HTML>

アニメーション

この例では、アニメーションをカスタマイズするために、あなたはまた、オープンイベントを使用することができ、アニメーションをカスタマイズするには、showと非表示オプションを使用する方法を示します。

<！DOCTYPE HTML>
<HTML LANG = "EN">
<ヘッド>
  <メタ文字セット= "UTF-8">
  <タイトル> jQueryのUIのツールチップボックス（ツールチップ） - アニメーション</タイトル>
  <リンクのrel = "スタイルシート"のhref = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <SCRIPT SRC = "// code.jquery.com/jquery-1.9.1.js"> </スクリプト>
  <SCRIPT SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </スクリプト>
  <リンクのrel = "スタイルシート"のhref = "http://jqueryui.com/resources/demos/style.css">
  <スクリプト>
  $（関数（）{
    $（ "＃ショー・オプション」を参照）.tooltip（{
      ショー：{
        効果：「slideDown」、
        遅延：250
      }
    }）;
    $（ "＃隠す-オプション」）.tooltip（{
      非表示：{
        効果：「爆発」、
        遅延：250
      }
    }）;
    $（ "＃オープンイベント」）.tooltip（{
      ショー：ヌル、
      位置：{
        私：「トップの左」、
        時：「左下」
      }、
      オープン：機能（イベント、UI）{
        ui.tooltip.animate（{トップ：ui.tooltip.position（）トップ+ 10}、 "速いです"）;
      }
    }）;
  }）;
  </スクリプト>
</ HEAD>
<ボディ>
 
<P>ツールチップボックスのアニメーションをカスタマイズするいくつかの方法があります。 </ P>
<P>あなたは<a id="show-option" href="http://jqueryui.com/demos/tooltip/#option-show"title="向下滑动显示">ショー</a>を使用することができますし、 <a id="hide-option" href="http://jqueryui.com/demos/tooltip/#option-hide"title="爆炸隐藏"></a>のオプションを非表示にします。 </ P>
<P>また、<a id="open-event" href="http://jqueryui.com/demos/tooltip/#event-open"title="向下移动显示">オープン</a>に使用することができますイベント。 </ P>
 
 
</ BODY>
</ HTML>

カスタムコンテンツ

単一のインスタンスに異なるイベントデリゲートツールチップボックスを組み合わせてアイテムやコンテンツのオプションをカスタマイズする方法を示します。

あなたが実現される機能の将来のバージョンでツールチップボックスの相互作用を、マップする必要があります。

<！DOCTYPE HTML>
<HTML LANG = "EN">
<ヘッド>
  <メタ文字セット= "UTF-8">
  <タイトル> jQueryのUIのツールチップボックス（ツールチップ） - カスタムコンテンツ</タイトル>
  <リンクのrel = "スタイルシート"のhref = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <SCRIPT SRC = "// code.jquery.com/jquery-1.9.1.js"> </スクリプト>
  <SCRIPT SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </スクリプト>
  <リンクのrel = "スタイルシート"のhref = "http://jqueryui.com/resources/demos/style.css">
  <スタイル>
  .photo {
    幅：300ピクセル;
    テキスト整列：センター;
  }
  .photo .ui-ウィジェットヘッダ{
    マージン：1EM 0;
  }
  .MAP {
    幅：350px;
    高さ：350px;
  }
  .ui-ツールヒント{
    max-width：350px;
  }
  </スタイル>
  <スクリプト>
  $（関数（）{
    $（ドキュメント）.tooltip（{
      アイテム：「IMG、[データ-地理]、[タイトル]」、
      内容：関数（）{
        var要素= $（この）。
        場合（element.is（「[データ-地理] "））{
          varの各テキスト= element.text（）;
          リターン "<IMGクラス= 'マップ' ALT = '" +テキスト+
            " 'のSrc ='のhttp：//maps.google.com/maps/api/staticmap？" +
            「ズーム= 11＆サイズ= 350x350＆マップタイプ=地形＆センサー=偽＆センター= "+
            テキスト+ " '>";
        }
        場合（element.is（「[タイトル] "））{
          戻りelement.attr（ "タイトル"）;
        }
        場合（element.is（ "IMG"））{
          戻りelement.attr（「ALT」）。
        }
      }
    }）;
  }）;
  </スクリプト>
</ HEAD>
<ボディ>
 
<DIV CLASS = "UIウィジェットフォト">
  <DIVクラス= "UIウィジェットヘッダUI-コーナー-すべて">
    <H2>シュテファン大聖堂（聖シュテファン大聖堂）</ H2>
    <H3> <a href="http://maps.google.com/maps?q=vienna,+austria&amp;z=11" data-geo="">ウィーン、オーストリア（ウィーン、オーストリア）</a>の< / H3>
  </ DIV>
  <a href="http://en.wikipedia.org/wiki/File:Wien_Stefansdom_DSC02656.JPG">
    <IMG SRC = "../のwp-コンテンツ/アップロード/ 2014/03 / ST-stephens.jpg" ALT = "聖シュテファン大聖堂（聖ステパノ 'は、大聖堂）"クラス= "UI-コーナーすべて">
  こちら</a>
</ DIV>
 
<DIV CLASS = "UIウィジェットフォト">
  <DIVクラス= "UIウィジェットヘッダUI-コーナー-すべて">
    <H2>タワーブリッジ（タワーブリッジ）</ H2>
    <H3> <a href="http://maps.google.com/maps?q=london,+england&amp;z=11" data-geo="">ロンドン（ロンドン、イングランド）</a>の< / H3>
  </ DIV>
  <a href="http://en.wikipedia.org/wiki/File:Tower_bridge_London_Twilight_-_November_2006.jpg">
    <IMG SRC = "../のwp-コンテンツ/アップロード/ 2014/03 /タワー-bridge.jpg" ALT = "タワーブリッジ（タワーブリッジ）"クラス= "UI-コーナーすべて">
  こちら</a>
</ DIV>
 
<a href="http://commons.wikimedia.org/wiki/Main_Page">ウィキメディア・コモンズから<P>すべての画像</a>に、とは、<a href = "http://creativecommons.org/によって所有されていますBY-SA 3.0 </a>の著作権所有者の下でライセンス/ BY-SA / 3.0 / deed.en "タイトル="クリエイティブ・コモンズ表示 - 継承3.0 "> CC。 </ P>
 
 
</ BODY>
</ HTML>

フォーム

ヘルプテキストを表示する、または単に入力ボックスの上にマウスホバーを聞かせたりフォーカスが入力ボックスをするには、下のボタンを使って、あなたが入力ボックスに対応するヘルプテキストを表示することができます。

同時にテキストがより一貫性に見えるすべてのヘルプが表示されるように、CSSで固定幅を定義します。

<！DOCTYPE HTML>
<HTML LANG = "EN">
<ヘッド>
  <メタ文字セット= "UTF-8">
  <タイトル> jQueryのUIのツールチップボックス（ツールチップ） - フォーム</タイトル>
  <リンクのrel = "スタイルシート"のhref = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <SCRIPT SRC = "// code.jquery.com/jquery-1.9.1.js"> </スクリプト>
  <SCRIPT SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </スクリプト>
  <リンクのrel = "スタイルシート"のhref = "http://jqueryui.com/resources/demos/style.css">
  <スタイル>
  ラベル{
    表示：インラインブロック;幅：5em。
  }
  フィールドセットのdivの{
    マージン底：2EM。
  }
  フィールドセット.help {
    表示：インラインブロック;
  }
  .ui-ツールヒント{
    幅：210px;
  }
  </スタイル>
  <スクリプト>
  $（関数（）{
    VARツールチップ= $（ "[タイトル]」）.tooltip（）;
    $（ "<ボタン>"）
      .text（「ヘルプを表示」）
      .button（）
      .click（関数（）{
        tooltips.tooltip（ "オープン"）;
      }）
      .insertAfter（ "フォーム"）;
  }）;
  </スクリプト>
</ HEAD>
<ボディ>
 
<フォーム>
  <フィールドセット>
    <DIV>
      <= "姓"のラベル>名前</ label>は
      <入力されたID = "姓"名前= "姓"タイトル= "あなたの最初の名前を入力してください。">
    </ DIV>
    <DIV>
      姓</ label>は、<= "姓"のラベル>
      <入力されたID = "姓"名前= "姓"タイトル= "あなたの姓を入力してください。">
    </ DIV>
    <DIV>
      <= "アドレス"のラベル>住所</ label>は
      <入力のid = "アドレス"名前= "アドレス"タイトル= "あなたの自宅や職場のアドレス。">
    </ DIV>
  </フィールドセット>
</フォーム>
 
 
</ BODY>
</ HTML>

トラッキングマウス

この例ではツールチップボックスは、マウスがエレメント上を移動するとき、それは、マウスの動きに追従し、マウスに対して位置決めされます。

<！DOCTYPE HTML>
<HTML LANG = "EN">
<ヘッド>
  <メタ文字セット= "UTF-8">
  <タイトル> jQueryのUIのツールチップボックス（ツールチップ） - マウスのトラッキング</タイトル>
  <リンクのrel = "スタイルシート"のhref = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <SCRIPT SRC = "// code.jquery.com/jquery-1.9.1.js"> </スクリプト>
  <SCRIPT SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </スクリプト>
  <リンクのrel = "スタイルシート"のhref = "http://jqueryui.com/resources/demos/style.css">
  <スタイル>
  ラベル{
    表示：インラインブロック;
    幅：5em。
  }
  </スタイル>
  <スクリプト>
  $（関数（）{
    $（ドキュメント）.tooltip（{
      トラック：真
    }）;
  }）;
  </スクリプト>
</ HEAD>
<ボディ>

<P> <a href="#"title="部件的名称">ツールチップ</a>のそれは任意の要素にバインドすることができます。 あなたが要素の上に置くと、タイトルプロパティは、ツールチップボックスなどのネイティブのように、次の要素への小さなボックスに表示されます。 </ P>
<P>しかし、それはスタイルを定義することができるので、それがネイティブのツールチップボックスではありませんので。 <a href="http://themeroller.com" title="ThemeRoller:jQuery UI的主题创建应用程序">ThemeRollerの</a>に作成されたことにより、テーマもそれに応じて、ツールチップボックスのスタイルを定義することができます。 </ P>
<P>ツールチップボックスは、各領域にいくつかの追加情報を表示するための要素を形成するために使用することができます。 </ P>
<P> <ラベル= "年齢">あなたの年齢：</ label>は<入力のid = "年齢"タイトル= "年齢のみが統計的に使用されます。"> </ P>
<P>ツールチップボックスを表示するには、対応する領域の上にホバー。 </ P>
 
 
</ BODY>
</ HTML>

ビデオプレーヤー

様/共有/ Statistics]ボタン、カスタムスタイルのツールチップボックスで各ボタンで仮想ビデオプレーヤー。

<！DOCTYPE HTML>
<HTML LANG = "EN">
<ヘッド>
  <メタ文字セット= "UTF-8">
  <タイトル> jQueryのUIのツールチップボックス（ツールチップ） - ビデオプレーヤー</タイトル>
  <リンクのrel = "スタイルシート"のhref = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <SCRIPT SRC = "// code.jquery.com/jquery-1.9.1.js"> </スクリプト>
  <SCRIPT SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </スクリプト>
  <リンクのrel = "スタイルシート"のhref = "http://jqueryui.com/resources/demos/style.css">
  <スタイル>
  .player {
    幅：500pxなど。
    高さ：300ピクセル;
    ボーダー：2PX溝グレー。
    背景：RGB（200、200、200）;
    テキスト整列：センター;
    行の高さ：300ピクセル;
  }
  .ui-ツールヒント{
    国境：1pxの白色の固体;
    背景：RGBA（20、20、20、1）。
    色：白;
  }
  .SET {
    表示：インラインブロック;
  }
  .notification {
    位置：絶対;
    表示：インラインブロック;
    フォントサイズ：2EM。
    パディング：.5em。
    ボックスシャドウ：2PX 2PX 5pxの-2px RGBA（0,0,0,0.5）。
  }
  </スタイル>
  <スクリプト>
  $（関数（）{
    関数{（入力）を通知します
      var msgが= "選択" + $ .trim（input.data（「ツールチップタイトル "）|| input.text（））;
      $（ "<DIV>"）
        .appendTo（document.body）
        .text（MSG）
        .addClass（「通知UIステートのデフォルトUI-コーナーボトム」）
        .position（{
          私：「中央上」、
          時：「中央上」、
          の：窓
        }）
        .SHOW（{
          効果：「ブラインド」
        }）
        .delay（1000）
        .hide（{
          効果：「ブラインド」、
          期間： "遅いです"
        }、関数（）{
          $（この）.remove（）;
        }）;
    }
 
    $（ "ボタン"）.each（関数（）{
      VARボタン= $（この）.button（{
        アイコン：{
          プライマリー：$（この）.dataセクション（「アイコン」）
        }、
        テキスト：!! $（この）.ATTR（「タイトル」）
      }）;
      button.click（関数（）{
        （ボタン）に通知。
      }）;
    }）;
    $（ ".SET"）.buttonset（{
      アイテム：「ボタン」
    }）;
 
    $（ドキュメント）.tooltip（{
      位置：{
        私：「中央上」、
        時：「中央下の+ 5」、
      }、
      ショー：{
        期間： "速いです"
      }、
      非表示：{
        効果：「隠します」
      }
    }）;
  }）;
  </スクリプト>
</ HEAD>
<ボディ>
 
<DIVクラス= "プレイヤー">ここでのビデオです（HTML5？）</ DIV>
<DIVクラス= "ツール">
  <スパンクラス= "設定">
    <ボタンデータ-アイコン= "UI-アイコン-円矢印-N"タイトル= "私はこのビデオを好き"> </ button>のような
    私はこのビデオを好きではない<「UI-アイコン-円矢印-sが "=ボタンデータ-アイコン> </ button>の
  </スパン>
  <DIVクラス= "設定">
    <ボタンデータ-アイコン= "UI-アイコン-円プラス"タイトル= "プレイリストに追加は"> </ button>の追加します
    <Buttonクラス= "メニュー"データ・アイコン= "UI-アイコン・三角形1-S">お気に入りに追加</ button>の
  </ DIV>
  <ボタンのタイトル= "このビデオを共有する">共有</ button>の
  不適切な</ button>のようにマークされた<ボタンデータ-アイコン= "UI-アイコンアラート」>
</ DIV>
 
 
</ BODY>
</ HTML>

前：jQueryのUIの例-タブ（タブ）

次へ：jQueryのUIの例-特殊効果（エフェクト）

jQuery UI コース

jQuery UI テーマ

jQuery UI コンポーネントライブラリ

jQuery UI リファレンスマニュアル

jQuery UI 例