jQuery UI API - ツールチップウィジェット（Tooltip Widget）

所属カテゴリ

ウィジェット（Widgets）

使用方法

説明：カスタマイズ可能で、テーマ化可能なツールチップで、ネイティブのツールチップを置き換えます。

バージョンで追加：1.9

ツールチップ（Tooltip）はネイティブのツールチップに取って代わり、テーマ化を可能にし、さまざまなカスタマイズも許可します：

  • タイトルだけでなく、インラインの脚注やAjaxで取得した追加コンテンツなど、他のコンテンツも表示します。
  • カスタム配置。例えば、要素上にツールチップを中央揃えにするなど。
  • 追加のスタイルを追加して、警告やエラー領域の外観をカスタマイズします。

デフォルトでは、フェードアニメーションを使用してツールチップを表示・非表示にします。この外観は、単純な表示切替よりも秀でています。これは、showとhideオプションでカスタマイズできます。

itemsとcontentオプションは同期を保つ必要があります。一方を変更した場合は、もう一方も同時に変更する必要があります。

一般的に、無効な要素はDOMイベントを一切トリガーしません。そのため、ツールチップをいつ表示・非表示にするかを決定するためにイベントを監視する必要があるので、無効な要素のツールチップを適切に制御することは不可能です。これにより、jQuery UIは無効な要素にアタッチされたツールチップに対して、いかなるレベルのサポートも保証できません。つまり、無効な要素でツールチップを表示する必要がある場合は、ネイティブのツールチップとjQuery UIツールチップの組み合わせを使用する必要があるかもしれません。

テーマ化

ツールチップウィジェット（Tooltip Widget）はjQuery UI CSS フレームワークを使用して、その外観と感触のスタイルを定義します。ツールチップ指定のスタイルが必要な場合は、以下のCSSクラス名を使用できます：

  • ui-tooltip：ツールチップの外側のコンテナ。
    • ui-tooltip-content：ツールチップのコンテンツ。

依存関係

補足説明

  • このウィジェットは機能的なCSSを必要とし、それがないと動作しません。カスタムテーマを作成する場合は、ウィジェット指定のCSSファイルを開始点として使用してください。

実例

title属性を持つすべての要素のイベント委任を使用して、ドキュメント上にツールチップ（Tooltip）を作成します。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>工具提示框部件（Tooltip Widget）演示</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
</head>
<body>
 
<p>
  <a href="../index.html" title="锚描述">锚文本</a>
  <input title="输入帮助">
</p>
<script>
  $( document ).tooltip();
</script>
 
</body>
</html>

その他の拡張