ToolTip

tooltip

簡単なツールチップのプラグインを作成してみました。
data-tooltipで対象の要素を指定し、ホバーしている最中にマウス付近に表示されます。

;(function($){
      $.fn.toolTip = function(options){
        var elem = $(this);
        var opts = $.extend({},$.fn.toolTip.defaults,options);
        var explanation = opts.explanation;
        var width = opts.width;
        var fontSize = opts.fontSize;
        var color = opts.color;
        //色設定
        var colorKind = {
          cool :{
            border: '#82c1d7'
          },
          warm : {
            border: '#e0623a'
          },
          normal : {
            border: '#323333'
          }
        };

        //tooltipのデザイン、内容
        var tooltip = $('<div>')
                        .text(explanation)
                        .css({
                          'position' : 'absolute',
                          'top' : 0,
                          'left' : 0,
                          'width' : width,
                          'padding' : '5px 10px',
                          'font-size' : fontSize,
                          'background' : 'white',
                          'border' : '2px solid black',
                          'border-color' : colorKind[color]['border'],
                          'border-radius' : '5px',
                          'box-shadow' : '0 0 10px rgba(25,25,25,0.2)',
                          'display' : 'none'
                        });
        //tooltipの表示
        function showToolTip(x,y){
          elem.after(tooltip).css({
            'top': y -50,
            'left': x + 10
          }).hover(
            function(){
              $(this).next().fadeIn(600);
            },
            function(){
              $(this).next().fadeOut(200);
            }
          );
        }

        //tooltipの移動
        function moveToolTip(x,y){
          tooltip.css({
            'top': y - 50,
            'left': x + 10
          });
        }

        //座標取得、showToolTip関数実行
        $(window).mousemove(function(e){
          posX = e.pageX;
          posY = e.pageY;
          showToolTip(posX,posY);
          moveToolTip(posX,posY);
        });

        return this;
      }

      $.fn.toolTip.defaults = {
        explanation: {},
        width: '200px',
        fontSize: '13px',
        color: 'cool'
      };
    })(jQuery);

    $(function(){
      $('input[data-tooltip="1"]').toolTip({
        //必須
        explanation:'全角半角英字でご入力ください'
        //任意
        width:幅
        fontSize:フォントサイズ
        color:cool,warm,normal
      });
      $('input[data-tooltip="2"]').toolTip({
        explanation:'全角カナでご入力ください'
      });
      $('input[data-tooltip="3"]').toolTip({
        explanation:'例）example@test.com'
      });

      ループを使えば、もっと簡潔に書けます
    });