ツールチップの基本的な使い方

ここには、4つのimg タグと、ツールチップとして働く title 属性があります。 JavaScriptが有効でない場合でも、この種の単純な構文は、ブラウザの標準ツールチップとして表示されます。 この全体のセットアップは、JavaScriptの1行で使用可能になります

スタンドアロン デモ

HTML コード

2つのものが必要です: カーソルを、その上に置いたときにツールチップを表示する、トリガと呼ばれ要素。 さらに、1つ以上のツールチップ要素が必要となります。 この設定では、トリガのすべてで動作する、単一のツールチップ要素を持ちます:

<div id="demo">
  <img src="image1.jpg" title="The tooltip text #1"/>
  <img src="image2.jpg" title="The tooltip text #2"/>
  <img src="image3.jpg" title="The tooltip text #3"/>
  <img src="image4.jpg" title="The tooltip text #4"/>

トリガー要素は、a、div、samp、table のような要素 にすることができます。

CSS コード

デフォルトでは、ツールチップは自動的に tooltip 要素を生成して、CSSクラス名に tooltip を割り当てます。 最初は、CSSに display: none を設定して、表示しないようにします。 トリガ要素に、スタイルを指定しません。

/* tooltip styling. by default the element to be styled is .tooltip  */
  .tooltip {
    display:none;
    background:transparent url(/media/img/tooltip/black_arrow.png);
    font-size:12px;
    height:70px;
    width:160px;
    padding:25px;
    color:#eee;
  }

JavaScript コード

ツールチップの活性化は、jQueryによりトリガ要素を選択するで開始します。 ここでは、title 属性を持ち、id が demo である要素内にネストされている、 すべての img タグを選択します。tooltip 要素へのjQueryのセレクタである、 ツールチップ初期化コールへ、1つの引数を指定します。

	$("#demo img[title]").tooltip();

デフォルトの動作では、ツールチップは、トリガの上方/中央に配置され、それが上方にスライドされます。 もちろん、ポジショニングとスライド効果は、これからのデモで見られるようにコンフィギュレーションで変更することができます。

$(document).ready の内にコールを括ることで、ドキュメントがスクリプト可能になった後にスクリプトを実行します。 ユーザーズマニュアルで、詳細を参照ください。