ツールチップを出す。

クリック

マウスオーバー
クリック2

このスクリプトの内容について

/*
 * ツールチップ表示
 *
 */

$(function()
{

  var toolTopFlg = 0; // 1:表示中 0:非表示
  var clickTipArr = new Array();

  /*
   * ベースオブジェクト
   */
  var tipView = function ()
  {
  }

  /*
   * マウスオーバー時
   * ツールチップ表示
   */
  tipView.prototype.over = function ()
  {
    // 動作中の場合は何もしない(連続表示を防ぐ)
    if(toolTopFlg != 1)
    {
      toolTopFlg = 1;
      // テキストを取得する場合はここで取得
      var text = $(this).attr('tipText');

      // this要素の設置位置の取得
      var off = $(this).offset();

      // 表示htmlの生成
      var html = ToolTipCreateOver(text,off.top,off.left);

      // 0.1秒処理を遅らせる
      // このサンプルの場合下から上へツールチップが出る。
      // オーバー直後に出すとマウスの位置によってはツールチップ要素にマウスが乗ってしまい
      // out処理が呼ばれてしう事があるので、一瞬遅らせる事によってある程度抑制している。
      setTimeout(function()
      {
        $("body").append(html);
        $(".viewOTop").animate(
            {
              top:0
            },"","",function(){ toolTopFlg = 0; });
      },100);
    }


  }

  /*
   * マウスアウト時
   */
  tipView.prototype.out = function ()
  {
    // ツールチップ非表示
    setTimeout(function()
    {
      $(".viewOTop").animate(
        {
          top:150
        },"","",function(){
          $(".viewOTip").remove();

        });
    },100);

  }

  /*
   * クリック時
   */
  tipView.prototype.click = function ()
  {

    // クリックされた要素のclassを取得正規表現
    var clickTipNum = $(this).attr('class').match(/(tip[0-9]{1,})/);
    clickTipNum = clickTipNum[0];

    // 現在開いているものの内容のチェック
    var arrKey = clickTipArr.indexOf(clickTipNum);

    // 現在の状態をチェック、既に開いている場合と閉じている場合の処理分岐
    if(arrKey < 0)
    {
      var text = $(this).attr('tipText');
      var off = $(this).offset();
      var html = ToolTipCreateClick(text,off.top,off.left,clickTipNum);
      $("body").append(html);

      setTimeout(function()
      {
        $(".viewCTop"+clickTipNum).animate(
          {
            top:0
          });
      },100);
      clickTipArr.push(clickTipNum);
    }
    else
    {
      // ツールチップ非表示
      setTimeout(function()
      {

        $(".viewCTop"+clickTipNum).animate(
          {
            top:150
          },'','',function()
          {
            $(".viewCTip"+clickTipNum).remove();
            delete clickTipArr[arrKey]
          });
      },100);

    }
  }

  myTipView = new tipView();

  $('.toolTipClick').click(myTipView.click);
  $('.toolTipOver').hover(myTipView.over,myTipView.out);


  /*
   * html生成用関数 マウスオーバー用
   *
   */
  function ToolTipCreateOver(inText,top,left)
  {
    // ツールチップ用HTMLの生成
    var html = "";

    top  = top - 100;
    left = left - 220;

    html+= "<div class=\"toolTipBox viewOTip\" style=\"position: absolute; top:\"+top+\"px; left:\"+left+\"px;width:300px;height:104px;overflow: hidden;\">";
    html+= "<div class=\"toolTipInnerBox\" style=\"position: relative; \">";
    html+= "<div class=\"toolTipTop viewOTop\" style=\"position: absolute; top:150px; left:30px;\">";
    html+= "<div class=\"toolTipBtn\">";
    html+= "<div class=\"toolTipBody\">";
    html+= "<div class=\"toolTipContent pre\">";
    html+= inText;
    html+= "</div>";
    html+= "</div>";
    html+= "</div>";
    html+= "</div>";
    html+= "</div>";
    html+= "</div>";
    return html;
  }

  /*
   * html生成用関数 クリック用
   *
   */
  function ToolTipCreateClick(inText,top,left,clickTipNum)
  {
    // ツールチップ用HTMLの生成
    var html = "";
    top  = top - 100;
    left = left - 220;
    html+= "<div class=\"toolTipBox viewCTip"+clickTipNum+"\" style=\"position: absolute; top:"+top+"px; left:"+left+"px;width:300px;height:104px;overflow: hidden;\">";
    html+= "<div class=\"toolTipInnerBox style=\"position: relative; \">";
    html+= "<div class=\"toolTipTop viewCTop"+clickTipNum+"\" style=\"position: absolute; top:150px; left:30px;\">";
    html+= "<div class=\"toolTipBtn\">";
    html+= "<div class=\"toolTipBody\">";
    html+= "<div class=\"toolTipContent pre\">";
    html+= inText;
    html+= "</div>";
    html+= "</div>";
    html+= "</div>";
    html+= "</div>";
    html+= "</div>";
    return html;
  }

  /*
   * 生成関数は一つにまとめたほうがいいけどとりあえず今回はバラしたままで
   */


});