「『クリックしたらツールチップを表示するスクリプト』をちょっと変えてみた。」をちょっと変えてみた。

『クリックしたらツールチップを表示するスクリプト』をちょっと変えてみた。

• 自分だったらこう書く的な。

まずはソースから

<table class="clickToolTip">
<tr>
<th><!-- 変更点： aタグのクラスをclickToolTipAnkerに変更 -->
  <div class="tooltipWrapper">
  タイトル&nbsp;<a href="javascript:void(0);" class="clickToolTipAnker">?</a>
  <!-- 変更点： pタグをこの位置に。idは削除 -->
  <p class="toolTip invisible">"タイトル"の説明</p>
  </div>
</th>
<td><input type="text" name="title"></td>
</tr>

<tr>
<th>
  <div class="tooltipWrapper">
  メッセージ<a href="javascript:void(0);" class="clickToolTipAnker">?</a>
  <p class="toolTip invisible">"メッセージ"の説明<br />複数行の内容を<br />書くことも可能。<br /><br />複数行の内容を書くことも可能。<br />複数行の内容を書くことも可能。<br />複数行の内容を書くことも可能。<br />複数行の内容を書くことも可能。</p>
  </div>
</th>
<td><textarea name="message" rows="5" cols="30"></textarea></td>
</tr>
</table>

$(function(){

	// ツールチップ表示処理 イベント自体はtableにセット。delegateでaタグ
	$('.clickToolTip').on('click', 'a.clickToolTipAnker', function(){
		var $this = $(this);
		//pタグは自分の親の子が持つp.tooltip
		var $p = $this.closest('.tooltipWrapper').find('.tooltip');

		// [?]の座標を取得
		var position = $this.position();
		var newPositionTop = position.top +10;				/* + 数値で下方向へ移動 */
		var newPositionLeft = position.left + 35;			/* + 数値で右方向へ移動 */

		// ツールチップの位置を調整
		$p
		.css({'top': newPositionTop + 'px', 'left': newPositionLeft + 'px'})
		.removeClass('invisible');
	});

    // 表示されたツールチップを隠す処理（ツールチップ領域以外をマウスクリックで隠す）
    $('html').on('mousedown', function(event){
        // イベント発生源である要素を取得（クリックされた要素を取得）
        var clickedElement = event.target;

        // 取得要素が"toolTip"クラスを持ってなかったら、ツールチップを非表示に
        if(!$(clickedElement).hasClass('toolTip')){
            $('p.toolTip').addClass('invisible');
        }
    });
});

変更点

• idによる指定ではなく、相対関係による指定に変更。

メリット

• 項目が増えてもコピペが作業がしやすくなる
• その都度idを振らなくても良くなる（名前考えるのめんどくさい）
• まとまりになっているので余所に移設しやすい

デメリット

• 多分idによる走査の方が早い（体感では分からないと思うけど）
• 記述量がちょっと増えた