完成に向けて調整していく!プラグイン内で使用するイベントには名前空間を使用しようツールチップの出す位置を柔軟に変更できるようにぜひこんなカスタマイズに挑戦してみて下さいクリックしたら表示する・閉じるdata属性を使ったオプション渡しアニメーションをかっこよくシリーズを振り返ってはじめにこれまでPart1、2とやってきましたが、今回で「jQueryでツールチップのプラグインを自作しよう」シリーズも最後です!今回は、前回のPart2でプラグイン化したコードを更に発展させて、プラグインとしての完成度を高められるように調整をしていきたいと思います。Part3最終的なファイルはGitHubの下記リポジトリでも確認できます。動作サンプルPart1の最初にも同じものを載せましたが、上記の様な動作が最終目標です。プラグイン内で使用するイベントには名前空間を使用しようより柔軟に使えるように設定項目を増やすツールチップを上下左右に出せるように位置の微調整を出来るようにマウスが離れてから、ツールチップが非表示になるまでの遅延処理が出来るようにツールチップ用のCSSクラスを変更できるように全体のコードを整理して完成させる冒頭でも書いた通り、プラグインとしての完成度を高めることが目標になっています。これまでの内容をなんとなく理解出来ていればあまり難しくは無い気がします...!完成に向けて調整していく!Part3ということもあって、だいぶjQueryを使ったプラグラミングに慣れてきたと思います。(そうでもないですかね?)なので、これまでと違って最初に全体のコードを載せてからあとでポイントを抑えていく方針で行きたいと思います。前回のコードとさほど変わりないのでご心配なく。現在の状態で止めることで自然な動きに調整します。};}));大きくは変わっていませんが、デフォルトの設定が増えたり、使っている関数が増えたりしています。それぞれコメントアウトを記載しているので、大丈夫かと思いますが次からポイントの解説をしていきたいと思います。プラグイン内で使用するイベントには名前空間を使用しよう上記のコードで言うと、下記の部分に該当します。"mouseleave.tooltip"};これまでだったら、「マウスを乗せたら...」という時にmouseenterを直接書いていました。マウスが乗った時の処理});MouseEvent.ROLL_OVERに入っている値をみると、いつものmouseenterの最後に.tooltipという文字が追加されています。.tooltipの部分を名前空間と呼びます。別に普通にmouseenterを書けばいいじゃんってなりそうですが、前回書いた「他のプラグインと競合しないように意識」というところに繋がってきます。長くなってしまうので今回は説明を省略してしまいますが、プラグイン内ではとりあえず付けておくという感じでも良い気がします。Qiitaツールチップの出す位置を柔軟に変更できるようにこれまではリンクテキストの上部分にしか出せていませんでしたが、先ほどのコードではdirectionというオプションに対して、下記のいずれかを指定できるようにしています。"top""right""bottom""left"例えば、"right"を指定した場合だと、.tooltip--rightというクラスが当てられるようになりました。class="tooltip__body">{内容}</span></span>CSS指定した方向に応じてクラスが割り当てられるようになったので、吹き出しの位置を調整するためにプラグイン用に作成した、./css/jquery.tooltip.cssを編集します。border-right-color:transparent;}座標の計算について吹き出しの位置を調整は出来たので、次は実際に表示する位置を調整します。コードでいうと下記の部分です。break;}対象となる要素の位置とサイズを元にして、ツールチップの位置を決めています。中央座標はよく使うので、ここでは位置(中央含む)とサイズを一気に取得するgetElementInfoという関数を用意してコードを簡略化しています。以上でPart1~3に渡るjQueryの自作ツールチッププラグイン作成は以上になります。お疲れ様でした!ぜひこんなカスタマイズに挑戦してみて下さい一応の完成はさせましたが、実はまだまだ改善の余地がありそうです。これから先は自分なりに実装を進めて、より使い勝手の良いプラグインへカスタマイズしてみてください!僕なりにこんな風にしたらどうか?というものを幾つか挙げたいと思います。クリックしたら表示する・閉じるマウスが乗ったら・離れたら、というタイミングでツールチップを操作していましたが、これをクリックにした場合にも対応できるようになっているとより多くの場面で活用できそうです。data属性を使ったオプション渡し作成したプラグインだと、テキストによってツールチップを出す方向を変更したい場合は別に指定しなければなりません。"right"});これだとせっかくプラグインとして機能をまとめたのにコードが少し煩雑です。data属性を使ってHTML側で設定できれば柔軟に対応できそうです。下記の様にdata-directionという属性で設定するイメージ。data-direction="right">テキストリンク</a>$(".my-tooltip").tooltip();コードが単純になりましたね!アニメーションをかっこよく今回扱ったツールチップは単純にフェードイン/アウトだけでしたが、フェード+上下左右の動きが加わるともう少しリッチな感じになりそうです。イメージ的にはこんな感じ。シリーズを振り返って記事を書いている最中、「これ本当に初心者向けか?」と何度も思いましたがなんとか3記事書き終わりました。今回扱った内容がjQueryのプラグインでしたが、これに限らず一度作ったものを汎用的に使いまわせるようにしていく+より使い勝手よく調整をしていく、ということへ積極的にチャレンジしてもらえたらなと思います!もし分からない点などありましたら出来る限りのフォローをしたいと思いますので、コメントか@vandalTsuyoshiまで言ってくれたらと思います。この記事のコメントメールアドレスが公開されることはありません。お気軽にコメントどうぞ。コメントをキャンセル渋谷でWebサイトを作っています。ちなみに、「ダッケル」はドイツ語でダックスフンドの事だそうです。