[JS]実装のロジックを理解して、自分に適したツールチップを作成するチュートリアル

ツールチップのスクリプトやプラグインは、数多くリリースされています。
ここではjQueryを使用したツールチップをどのようなロジックで実装するかを解説したチュートリアルを紹介します。

サイトのキャプチャ

Simple Tooltip w/ jQuery & CSS
デモページ

[ad#ad-2]

下記は各ポイントを意訳したものです。

1. マークアップ -HTML

マークアップをする際に気をつけることは可能な限りシンプルするのと同時に、さまざまなシナリオに対応できるよう柔軟にすることです。

メインとなるa要素にはツールチップを表示するために、class名「tip_trigger」を記述します。また、ツールチップのコンテンツを配置するspan要素には、class名「tip」を記述します。

2. スタイル -CSS

スタイルシートも信じられないほどシンプルです。
これを元にし、さらにクリエイティブなものを作ってください。

ツールチップはデフォルトでは隠れた状態で、jQueryを使用してホバー時に表示されます。このツールチップのエレメントを一番上に表示するために、positionに「absolute」、z-indexに「1000」を指定します。

[ad#ad-2]

3. エフェクト -jQuery

jQueryが分からない場合は、最初にサイトをチェックしてjQueryがどのように機能するのか概略をつかんでください。
※訳者注:当サイトでもjQueryに関するコンテンツがあるので、チェックしてみてください。
コリス内のjQuery関連の記事

最初のステップ -jQueryファイルの設置

jQueryのサイトから「jquery.js」をダウンロードして、自分の使用しているサーバーに設置します。
または、Googleにホストされているファイルを使用することもできます。その際は、下記のように記述します。

jQueryファイルの設置が完了したら、その後の行に<script>を使用して、下記のスクリプトを記述します。

4. スクリプトのロジック

  1. .tipセレクタ
    tipには「$(this).find('.tip')」を割り当てています。これによりdom操作を行います。
  2. ホバーの判定
    ホバーになった際は「.tip」を表示し、ホバーがはずれた際は「.tip」を隠します。
  3. マウスオーバー
    マウスイベントをトリガーにする際は、「e.pageX」と「e.pageY」でマウスの座標を取得します。ここでは少し余裕をもたせるために、それぞれ20pxをプラスしています。
  4. 変数のセット
    ツールチップが表示領域からはみだしてしまう場合を考慮する必要があります。ここでは、ツールチップを表示するポジションを変更します。このポジションを決めるために、ツールチップの幅(tipWidth)と高さ(tipHeight)を取得します。はみだしたかどうか検出するためには、表示領域の幅と高さから、座標にツールチップの幅と高さをプラスした値をマイナスします。
  5. ツールチップが水平方向にはみだす場合
    ツールチップが表示領域から水平方向にはみだす場合は、マウスの左側にツールチップを表示します。これはマウスのX座標を取得し、ツールチップの幅をマイナスすることで計算します。
  6. ツールチップが垂直方向にはみだす場合
    ツールチップが表示領域から垂直方向にはみだす場合は、マウスの上側にツールチップを表示します。これはマウスのY座標を取得し、ツールチップの高さをマイナスすることで計算します。
  7. デフォルトの設定
    ツールチップが表示領域から水平・垂直方向にはみださない場合は、デフォルトの状態としてマウスの右下側にツールチップを表示します。そして、マウスの動きに追従するようにセットします。

5. 注意点

function内に繋がれた二つのイベントがあることに注目してください。「.hover()」と「.mouover()」に精通していない場合は、各ドキュメントに目を通しておいてください。
また、「tipVisX < 20」「tipVisY < 20」にも注目してください。これは、ツールチップに10pxのパディングを与えるために使用しています。

サイトのキャプチャ

デモページ

sponsors

top of page

©2018 coliss