jQueryプラグインの魅力は、JavaScriptの知識がなくても簡単に色々な機能を実装できることですね。今回は「誰でも簡単に実装できるツールチッププラグイン」を作成してみましょう。
ツールチッププラグインの要件は以下の通りです。
- titleまたはalt属性がある要素を対象
- titleとalt属性両方を持っている場合はtitleを優先
- 対象要素にマウスオーバーでツールチップをフェードイン
- 対象要素からマウスアウトでツールチップをフェードアウト
- 対象要素上ではツールチップはカーソルに追従
まずは完成サンプルとソースコードを見てみましょう。
今回使うメソッドの紹介
まずは今回使うメソッドを復習の分も兼ねて紹介しておきます。
filter
filterで指定した要素に絞ります。今回使っている方法は、filterの中のfunctionで絞り込みの条件を返しています。return this.title;とした場合、div要素の中でtitle属性を持っているものに絞ります。
stop
jQueryではfadeInやslideDownなど、要素を簡単にアニメーションさせるメソッドがありますが、これらは実行された際に一度アニメーションキューに保存され、順番に実行されていきます。stopメソッドは、現在実行されているアニメーションを中断するためのメソッドです。
ただしマウスの動きによって連続してアニメーションを実行するなど、使い方によっては、中途半端にアニメーションを止めてしまい、次回の実行に支障が出たりします。
stop(true,true)というように実行すれば便利に使うことができますので、使う場合は、(true,true)も併せて覚えておくとよいでしょう。
2つのサンプルの動作を見比べると、アニメーションのキューが残っているか残っていないかがはっきり分かると思います。
プラグインの枠組み
まずはプラグインの枠組みを作っておきます。これから書いていくコードはこれの中に書きます。
プラグインは以下のように実行できます。
ツールチッププラグインの作成
ツールチップをDOMに追加する
実行時に受け取る要素からtitleまたはalt属性を持っているものに絞る
ここで前述のfilterを使います。以下は、titleまたはalt属性を持っているもののみを返します。
対象とする要素に実行する機能を割り当てる
filterで対象を絞り、eachで対象全てに機能を割り当てます。まずは、何度も使うのでselfに$(this)のエイリアスを当てておきましょう。
targetはtitleまたはaltになりますが、両方持っている場合も考えられるので、その場合はtitle属性を優先するように3項演算子を使います。上記の①は以下のようにも書くことができます。
取得したtargetの値を②で保存しておきます。
ツールチップの表示、非表示
hoverメソッドを使ってmouseover、mouseout時の動作を記述します。
ここでのポイントは、カーソルが要素に乗ったときにツールチップを表示させるのですが、マウスカーソルの右上あたりにツールチップを表示することです。
カーソル位置の取得
カーソルの右上あたり、をcssメソッドを使って指定するのですが、これには、mouseoverにbindする無名関数の引数のe(識別できればなんでもよい)を利用します。引数eは関数内でpageYやpageXといったプロパティを持ち、この2つの値からカーソルの位置を得ることができます。今回のサンプルではカーソルから右上に20pxずつずらして表示しています。
カーソルに追従するツールチップ
このことを利用して、要素上でカーソルが動いたときはカーソルに追従するようにcssの値を書き換えます。次のサンプルを見るとカーソルが動くたびにコンソールにカーソル位置が表示されるのが分かると思います。
ツールチッププラグインにもmousemoveの処理を追加します。
ブラウザデフォルトのツールチップを無効にする
ここまででほぼ完成ですが、titleやalt属性を持っている値にカーソルが乗ったとき、ブラウザデフォルトの機能でツールチップが表示される場合があります。今回実装するツールチップと機能が若干かぶるので、表示しないようにします。具体的には、mouseover時にtitleまたはalt属性を削除し、mouseout時に追加する2文を追加するだけです。
以上で完成です。実行してみましょう!