Tooltip / ツールチップ

ツールチップをカスタマイズするには、jQuery UI の Tooltip が便利だ。

ツールチップとは、カーソルを合わせると現れる小さな枠（ウィンドウ）のこと。小さな枠の中には、カーソルを合わせた項目の説明や補足情報を表示する。

• jQuery UI の Tooltip によるツールチップ

  jQuery UI の Tooltip でカスタマイズするツールチップのデフォルト状態。

• jQuery UI の Tooltip で入力欄のすぐ右横にツールチップを表示

  jQuery UI の Tooltip で、入力欄のすぐ右横にツールチップを表示する方法。

• jQuery UI の Tooltip で入力欄の右横にツールチップを表示

  jQuery UI の Tooltip で、入力欄の右横の少し離れた位置にツールチップを表示する方法。

• jQuery UI の Tooltip で入力欄の真上にツールチップを表示

  jQuery UI の Tooltip で、入力欄の真上にツールチップを表示する方法。

• jQuery UI の Tooltip で入力欄の上にツールチップを表示

  jQuery UI の Tooltip で、入力欄の上の少し離れた位置にツールチップを表示する方法。

• jQuery UI の Tooltip で入力欄の真下にツールチップを表示

  jQuery UI の Tooltip で、入力欄の真下にツールチップを表示する方法。

• jQuery UI の Tooltip で入力欄の下にツールチップを表示

  jQuery UI の Tooltip で、入力欄の下の少し離れた位置にツールチップを表示する方法。

• jQuery UI の Tooltip のツールチップを縦スライドで表示/非表示

  jQuery UI の Tooltip によるツールチップを、入力欄の真下に、スライドダウンのアニメーションで出現し、スライドアップのアニメーションで隠れるようにする方法。

• jQuery UI の Tooltip のツールチップを横スライドしながら透明/不透明

  jQuery UI の Tooltip によるツールチップを、左から右へ横スライドしながら徐々に透明から不透明になるアニメーションで表示し、左へスライドしながら徐々に透明になるアニメーションで非表示になるようにする方法。

• jQuery UI の Tooltip のツールチップを横スライドで表示/非表示

  jQuery UI の Tooltip による入力欄の右横のツールチップを、左から右への横スライドのアニメーションで出現し、右から左への横スライドのアニメーションで隠れるようにする方法。

• jQuery UI の Tooltip のツールチップを破裂アニメーションで表示/非表示

  jQuery UI の Tooltip によるツールチップを、入力欄の真下に、破裂を逆回転したようなアニメーションで表示し、破裂のアニメーションで非表示になるようにする方法。

• jQuery UI の Tooltip のツールチップを伸縮アニメーションで表示/非表示

  jQuery UI の Tooltip によるツールチップを、入力欄の真下に、縮みながら徐々に透明から不透明になるアニメーションで表示し、徐々に膨らみながら透明になるアニメーションで非表示になるようにする方法。

• jQuery UI の Tooltip のツールチップをクリップ開閉アニメで表示/非表示

  jQuery UI の Tooltip によるツールチップを、クリップが開くようなアニメーションで表示し、クリップが挟むようなアニメーションで非表示になるようにする方法。

• jQuery UI の Tooltip のツールチップをサイズ変更アニメで表示/非表示

  jQuery UI の Tooltip によるツールチップを、拡大アニメーションで表示し、縮小アニメーションで非表示になるようにする方法。

• jQuery UI の Tooltip で入力欄の真下に吹き出し風ツールチップを表示

  jQuery UI の Tooltip で、入力欄の真下に吹き出し型ツールチップを表示する方法。

• jQuery UI の Tooltip のツールチップをカーソルの右下に表示

  jQuery UI の Tooltip で、カーソルを合わせたときに、カーソルの右下にツールチップを表示させる方法。

• jQuery UI の Tooltip でアンカーテキストの下にツールチップ

  jQuery UI の Tooltip によるツールチップを、スライドダウンのアニメーションでアンカーテキストの下に表示し、スライドアップのアニメーションで非表示にする方法。

• jQuery UI の Tooltip でアンカーテキストの真下に吹き出し風ツールチップを表示

  jQuery UI の Tooltip で、アンカーテキストの真下に吹き出し型ツールチップを表示する方法。

• jQuery UI の Tooltip で、ボックス要素にツールチップを設定

  jQuery UI の Tooltip において、ボックス要素にカーソルを合わせたときに、カーソルの右下にツールチップを表示させる方法。

• jQuery UI の Tooltip で作る画像用ツールチップ

  jQuery UI の Tooltip で、画像にカーソルを合わせたときに、img要素のalt属性の値を、ツールチップとして表示させる方法。

• jQuery UI の Tooltip で入力欄にも画像にもツールチップ

  jQuery UI の Tooltip で、入力欄にも画像にもツールチップを表示させる方法。