refirio.org

HTML

HTMLは以下のとおりです。a タグに class="tooltip" を設定したものがツールチップを表示するリンク、p タグに class="tooltip" を設定したものがツールチップの内容です。それぞれ、ページ内リンクの要領で定義します。

<a href="#note1" class="tooltip">？</a>
<a href="#note2" class="tooltip">？</a>

<p id="note1" class="tooltip">項目1の説明。</p>
<p id="note2" class="tooltip">項目2の説明。<br >複数行の<br >説明を<br >書くこともできます。</p>

CSS

CSSは以下のとおりです。a.tooltip の内容は、アイコン風に見た目を調整しているだけです。また p.tooltip はツールチップの見た目になります。opacity: .50; というのは透明度の設定です。

<style>
a.tooltip {
  padding: 1px 3px;
  border-radius: 4px;
  -moz-border-radius: 4px;
  background-color: #AAAAAA;
  color: #FFFFFF;
  font-size: 80%;
  font-weight: bold;
  text-decoration: none;
}
p.tooltip {
  display: block;
  list-style: none;
  width: 200px;
  min-height: 50px;
  border-radius: 8px;
  -moz-border-radius: 8px;
  padding: 10px;
  background-color: #000000;
  color: #FFFFFF;
  opacity: .50;
}
</style>

JavaScript

JavaScriptは以下のとおりです。まずはjQueryと、自作プラグインの jquery.tooltip.js を読み込みます。jquery.tooltip.js は、ツールチップを作成してくれるjQueryプラグインです。オプションとしてdistanceXとdistanceYを指定することができます。例えばそれぞれ 10 と設定すると、クリックした位置からX軸方向とY軸方向に10px離れた位置にツールチップが表示されます。

<script src="../jquery.js"></script>
<script src="jquery.tooltip.js"></script>
<script>
$(document).ready(function() {
  $('a.tooltip').tooltip({
    distanceX: 10,
    distanceY: 10
  });
});
</script>

また、distanceXとdistanceYの代わりにpositionXとpositionYを指定すると、クリックした位置からではなく固定された位置にツールチップが表示されます。以下の場合、画面左上を基準としてX軸方向とY軸方向に50px離れた位置にツールチップが表示されます。

$('a.tooltip').tooltip({
  positionX: 50,
  positionY: 50
});

プラグイン

jquery.tooltip.js の内容は以下のとおりです。

(function($) {
  $.fn.tooltip = function(option) {
    var settings = $.extend({
      distanceX: 0,
      distanceY: 0,
      positionX: 0,
      positionY: 0
    }, option);

    var targets = [];

    $(this).each(function() {
      targets.push($(this).attr('href'));
    });

    hide(targets);

    $(this).click(function(e) {
      hide(targets);

      $($(this).attr('href')).css({
        display: 'block',
        position: 'absolute',
        top: (settings.positionX ? settings.positionX : settings.distanceX + e.pageY) + 'px',
        left: (settings.positionY ? settings.positionY : settings.distanceY + e.pageX) + 'px'
      });

      return false;
    });

    $(document).mousedown(function() {
      hide(targets);
    });

    return this;
  };

  var hide = function(targets) {
    $.each(targets, function(key, value) {
      $(value).css({
        display: 'none'
      });
    });
  }
})(jQuery);

まずは

$.fn.tooltip = function(option) {
  var settings = $.extend({
    distanceX: 0,
    distanceY: 0,
    positionX: 0,
    positionY: 0
  }, option);

の部分でオプションを受け取ります。各値の初期値は 0 としています。

var targets = [];

$(this).each(function() {
  targets.push($(this).attr('href'));
});

ツールチップのリンク先を配列に格納しています。今回の場合、#note1 や #note2 という値が配列に格納されます。

hide(targets);

hide() は自作の関数で、対象を配列で渡すとそれらを非表示にします。今回の場合、#note1 や #note2 というIDを持つ要素が非表示になります。

$(this).click(function(e) {
  hide(targets);

  $($(this).attr('href')).css({
    display: 'block',
    position: 'absolute',
    top: (settings.positionX ? settings.positionX : settings.distanceX + e.pageY) + 'px',
    left: (settings.positionY ? settings.positionY : settings.distanceY + e.pageX) + 'px'
  });

  return false;
});

ツールチップがクリックされたときに実行する処理です。

一旦すべてのツールチップを非表示にしてから、今回クリックしたツールチップのみを表示しています。表示は、CSSの display と position を変更することにより行なっています。また、top と left で表示位置を決定しています。

$(document).mousedown(function() {
  hide(targets);
});

ページ内のどこかがクリックされたときに実行する処理です。クリックされると、すべてのツールチップを非表示にします。

var hide = function(targets) {
  $.each(targets, function(key, value) {
    $(value).css({
      display: 'none'
    });
  });
}

実際にツールチップを非表示にする関数の内部です。各要素のCSSに対して、display を変更することにより行なっています。