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


More than 5 years have passed since last update.


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


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

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

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

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

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

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

        // 取得要素が"toolTip"クラスを持ってなかったら、ツールチップを非表示に


  • 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