Help us understand the problem. What is going on with this article?

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

More than 5 years have passed since last update.

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

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

まずはソースから

<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による走査の方が早い(体感では分からないと思うけど)
  • 記述量がちょっと増えた
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away