シンプルなマウスオーバー時のツールチッププラグインを作ってみた

最近勉強してるjQueryでプラグイン作ってみた。
作り方などは以下を参考に。。。
http://net.tutsplus.com/articles/news/you-still-cant-create-a-jquery-plugin/

↑「jQueryプラグイン、まだ作れないんですか？」と、NET TUTSにしては挑発的なタイトルだったので思わずクリック。
そして実際は、実直に丁寧な解説をしているだけだったのでむしろ好感を持ってしまったw

ただ、初心者向けだからなのか、イベントオブジェクトのe.pageX,e.pageYはIEでは取得できないなどの問題があったので
ちょっくら修正して実装しなおしてみた。

あと、title要素の中身を空にすることで、ブラウザデフォルトのツールチップが出ないようにしてるけど、titleが消えると、後から他のプラグインで利用しようと思った時などに不便になる。
なのでdata-titleの中に入れなおしてみた。

あとはちょこちょこ効率化のための仕込みを行ったくらい。
これをベースに、暇を見てちょこちょこ改善していこうとおもってます。

JavaScript

(function($){
  $.fn.simpleTooltip = function(options) {
    var defaults = {
        background: '#fefefe',
        color: 'black',
        opacity: '0.9',
        anotherTitle: "data-title"
      },
      settings = $.extend({}, defaults, options),
      isIE = /*@cc_on!@*/false,//IE判定
      $tooltip = $('<div id="tooltip" />').appendTo('body').hide();
    
    this.each(function(){//thisは生のDOMエレメントそのもの。
      var $this = $(this),//$(this)はjQueryオブジェクト化されたthisのこと。
        title = this.title;//each内のthisは、順番の回ってきた該当要素(DOMエレメント)。
      if($this.is('a') && title != '') {//is関数はjQuery独自のものなので、$thisと書かないと機能しない。
        $this
          .removeAttr('title')
          .attr(settings.anotherTitle,title)//jquery.tipsyみたいに、titleは消さず、オリジナルのtitleとして残しておく
          .hover(function(e){
            if(isIE) {
              e = {//イベントオブジェクト内の値をIE用に書き換える
                pageX : event.clientX + (document.body.scrollLeft || document.documentElement.scrollLeft),
                pageY : event.clientY + (document.body.scrollTop || document.documentElement.scrollTop)
              };
            }
            $tooltip
              .text(title)
              .hide()
              .css({
                backgroundColor: settings.background,
                color: settings.color,
                opacity: settings.opacity,
                top: e.pageY + 10,
                left: e.pageX + 20
              })
              .fadeIn(250);
          }, function(){
            $tooltip.fadeOut(250);
          })
          .mousemove(function(e){
            $tooltip.css({
              top: e.pageY + 10,
              left: e.pageX + 20
            });
          });
      }
    });
    return this;
  };
})(jQuery);

CSS

#tooltip {
	position: absolute;
	float: left;
	max-width: 160px;
	padding: 10px;
	font-size: 100%;
	line-height: 1.3;
	border: 1px solid #aaa;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;
	-moz-box-shadow: 0 0 5px #888;
	-webkit-box-shadow: 0 0 5px #888;
	box-shadow: 0 0 5px #888;
}

以下のようなマークアップがある場合、
$('.tooltip').simpleTooltip(); とやることで実行可能。

    <a href="..." class="tooltip" title="ツールチップ内に乗せたい文章">リンク</a>