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

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

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

まずはソースから

<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による走査の方が早い（体感では分からないと思うけど）
• 記述量がちょっと増えた