カスタムのツールチップ効果

ここでは、カスタマイズした "バウンドする"ツールチップ効果を見ることができます。 設定することは、基本設定と同じですが、独自にスライド効果を変更しています:

スタンドアロン デモ

HTML コード

ツールチップ要素とトリガを持つ簡単な設定です:

<!-- tooltip triggers -->
<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"/>

エフェクトの作成

"bouncy" と言うjQueryの新しいアニメーション・アルゴリズムを追加することから始めます。 これは jQuery.easing オブジェクトを拡張することによって可能になります。 このイージング関数は、jQuery Easing Plugin の ソースコードから入手しました。 試すことができる多くのイージング・アルゴリズムがあります。

カスタムツールチップ効果は、$.tools.tooltip.addEffect メソッドを使用して行います。 最初の引数はエフェクト名で、2番目の引数はツールチップの表示方法を定義する関数で、 3番目の引数はツールチップの閉じ方を定義する関数です。 関数内で、this 変数は tooltip API への参照です。

// create custom animation algorithm for jQuery called "bouncy"
  $.easing.bouncy = function (x, t, b, c, d) {
      var s = 1.70158;
      if ((t/=d/2) < 1) return c/2*(t*t*(((s*=(1.525))+1)*t - s)) + b;
      return c/2*((t-=2)*t*(((s*=(1.525))+1)*t + s) + 2) + b;
  }

  // create custom tooltip effect for jQuery Tooltip
  $.tools.tooltip.addEffect(
	  "bouncy",
	 
		// opening animation
		function(done) {
		    this.getTip().animate({top: '+=15'}, 500, 'bouncy', done).show();
		},
	 
		// closing animation
		function(done) {
	    this.getTip().animate({top: '-=15'}, 500, 'bouncy', function()  {
				$(this).hide();
				done.call();
	    });
		}
  );

注: this.getConf() メソッドにより、 設定オプションへのアクセスを取得することができ、 その上カスタム設定オプションを供給するために、 このオブジェクトを使用することができます。

JavaScript コード

ここに、ツールチップの設定があります。effect 設定変数を、 新しく作成したツールチップ効果に供給します。

	$("#demo img[title]").tooltip({effect: 'bouncy'});