ツールチップの動的配置

ツールチップが、トリガの上端中央に配置されたトリガを、下に見ることができます。 ここをクリックして少し下にスクロールした後、 ツールチップがどのように動作するかを見てください。 ビューポート上へ常に表示されるように、ツールチップの位置を変える 動的プラグインを使用しています。

スタンドアロン デモ

上端の方に余地がない場合は、ツールチップは下端の方に表示されます。 ツールチップの上、下、左、右すべてのエッジで同じことが発生します。 余地がないときは、反対側のエッジが使用されます。このデモは、 垂直再配置だけであることに注意してください。

動的再配置が発生するたびに、スタイル、エフェクト、その他の設定変数を変更することが可能です。 上記の例では、下端から表示されるとき、"slide" 効果が下方であることが理解できますので、 上向き矢印の別な背景画像を使用します。

デフォルトで、ツールチップを少し高く配置する offset オプションを使用しています。 動的効果を使用している場合、この値が反転されます。高いは低い、もっと右はもっと左を意味します。

動的なプラグインは、あらゆる効果と一緒に使用することができます。 上記の設定は、カスタムのスライド効果を使用しています。

HTML コード

ツールチップ要素とトリガを持つ最小限のセットアップ:

<!-- ツールチップ・トリガ -->
<div id="dyna">
  <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"/>
</div>

CSS コード

ツールチップが再配置される時に、新しいCSSクラス名が割り当てられます。 デフォルトで、どのエッジに新しく配置されたエッジかを識別するために、 "top"、"bottom"、"left"、"right" を使用します。 この名称は、プラグインの configuration から変更可能です。下端へ再配置するのため設定は次の通りです。

/* override the arrow image of the tooltip */
.tooltip.bottom {
  background:url(/media/img/tooltip/black_arrow_bottom.png);
  padding-top:40px;
  height:55px;
}
 
.tooltip.bottom {
  background:url(/media/img/tooltip/black_arrow_bottom.png);
}

JavaScript コード

ツールチップを初期化した後、dynamic() プラグインをチェーンします。 ボトム・エッジへツールチップ設定を変更するために、bottom パラメータを使用しました。 すべての設定オプションは、 ツールチップの動作を変更するために使用することができます。

// ツールチップの初期化
$("#dyna img[title]").tooltip({
 
   // 位置を微調整
   offset: [10, 2],
 
   // "slide" 効果を使用する
   effect: 'slide'
 
// ボトム・エッジへのオプション設定を持つ動的プラグインの追加
}).dynamic({ bottom: { direction: 'down', bounce: true } });

注: 動的なプラグインとスライドの効果は、標準のjQueryツール のディストリビューションには含まれていません。 それらの効果を含めるために、custom combination をダウンロードしなければなりません。