オリジナルツールチップの作成

jQuery

今度はツールチップ（何かにマウスオーバーしたときにその説明をマウス付近にポップアップ表示するヤツ）を作成する。

ツールチップ自体は、title属性やimg要素のalt属性にテキストを記述すれば表示されるが、表示のデザインや挙動がブラウザーによって違う上、HTMLとかCSSでカスタマイズができねぇ。

なので、デザイン、操作性共に一貫性のあるツールチップを表示できるようにするために、jQueryを使うというのが背景らしいぞ。

このエントリで紹介するのは次の３種のツールチップ。

では早速やってみよう。

CSSで装飾するシンプルなツールチップ

まずは「CSSで装飾するシンプルなツールチップ」。


リンク（a要素）にマウスカーソルが重なると補足テキストをフェードインで表示する。
ツールチップはマウスカーソルの右下にピッタリくっ付いて表示され、マウスの動きに合わせて移動する。

<html>
  <head>
    <style>
span.tooltip{
    line-height:1.5;
    color:white;
    width:200px;
    background:#FF9900;
    border:2px solid white;
    padding:1em;
    font-size:small;
}
    </style>
    <script type="text/javascript" src="http://www.google.com/jsapi"></script>
    <script type="text/javascript">google.load("jquery", "1.3.2");</script>
    <script type="text/javascript">
    $(function(){
      $("span.tooltip").css({
        opacity:"0.9", //透明度の指定
        position:"absolute",
        display:"none" //最初は非表示にしておく。
      })

      $("a").mouseover(function(){
        //aタグの上にマウスが来たときに、非表示にしていたツールチップタグを徐々に表示させる。
        $("span.tooltip").fadeIn();
      }).mouseout(function(){
        //マウスがいなくなったら徐々に非表示に。
        $("span.tooltip").fadeOut()
      }).mousemove(function(e){
        //マウスが動いている際に、その動きに追随していく。
        $("span.tooltip").css({
            "top":e.pageY+10+"px",
            "left":e.pageX+10+"px"
        })
      })
    })
    </script>
  </head>
  <body>
    <p>これは「CSSで装飾するシンプルなツールチップ」の実験です。<br/>
    <a href="http://ascii.jp/elem/000/000/438/438206/">ここ</a><span class="tooltip">これはASCII.jpの<br /><strong>Web制作の現場で使えるjQuery<br />UIデザイン入門</strong>（中略）</span>に掲載されているプログラムコードにバグを発見しました。<br/>
    jQueryコードの、$("span.tooltip")に対する初期化処理のロジック部分で、<br/>
CSSプロパティであるpositionの指定行が「;」セミコロンで終了しているために、<br/>
次の「display:"none"」の行が無効になっていたので気をつけてください。
    </p>
  </body>
</html>

ここのサンプルコードにバグ発見。jQueryコードの、$("span.tooltip")に対するCSSプロパティであるpositionの指定行が、「;」セミコロンで終了していて、display:"none" の行が無効になっていたので気をつけられたし。


透過GIFを使ったふき出し風のツールチップ

「ふきだし」だって。ふきだしにするからマウスカーソルの動きに追随して位置が移動すると困るので、このツールチップは位置固定です。

<html>
  <head>
    <style>
div.tooltip{
    width:230px;
    position:absolute;
}
div.tooltip p{
    line-height:1.5;
    margin:0;
    font-size:small;
    background:url("http://editors.ascii.jp/m-kobashigawa/jquery_sample/016/images/tooltipBody.gif") top right;
    padding:10px 5px 0 40px;
}
div.tooltip img{
    vertical-align:top;
}
    </style>
    <script type="text/javascript" src="http://www.google.com/jsapi"></script>
    <script type="text/javascript">google.load("jquery", "1.3.2");</script>
    <script type="text/javascript">
    $(function(){
      //tooltipクラスが適用されているタグの透明度を指定
      $("div.tooltip").css("opacity","0.9").hide()

      $("a").mouseover(function(){
        //任意のaタグの上にマウスカーソルが来たときに、
	//tooltipクラスが適用されているタグを徐々に表示。
	//かつ、マウスオーバー中のaタグの位置を元に表示座標を微調整する。
        $("div.tooltip").fadeIn().css({
          "top":$(this).offset().top-20+"px",
          "left":$(this).offset().left+$(this).width()+"px"
        });
      }).mouseout(function(){
        //任意のaタグの上からマウスカーソルが消えたときに、
	//tooltipクラスが適用されているタグを徐々に非表示にする。
        $("div.tooltip").fadeOut()
      })
    })
    </script>
  </head>
  <body>
    <p>Lorem （中略） quis, <a href="http://ascii.jp/elem/000/000/438/438206/">tooltip sample</a> （中略）</p>
    <div class="tooltip">
      <p>
        これはASCII.jpの<br />
        <strong>Web制作の現場で使えるjQuery<br />
          UIデザイン入門</strong><br />
        のサンプルプログラムです
      </p>
      <img src="http://editors.ascii.jp/m-kobashigawa/jquery_sample/016/images/tooltipFoot.gif" alt=" " />
    </div>
  </body>
</html>

とくに解説が必要なことはしてないなぁ。

透過PNGを使ったタイマー式のツールチップ

タイマー式のツールチップだって。マウスカーソルが離れた後、指定時間が経過すると消えるらしいぞ。

<html>
  <head>
    <style>
p.tooltip{
    margin:0;
    width:185px;
    height:86px;
    position:absolute;
    padding : 10px 20px 20px 10px;
    background:url("http://editors.ascii.jp/m-kobashigawa/jquery_sample/016/images/tooltip.png");
    font-size:small;
}
/* IE6はそのままでは透過PNGを表示できないので、IE6向けにはスターハックを利用する。*/
/* セレクターの前に「* html」を付けるのがスターハック。*/
/* これはIE6以下にだけ解釈できるCSSを記述する方法とのこと。*/
/* そのほかのブラウザーではスターハックで指定されたCSSは無視される。*/
* html p.tooltip{
    background:none;
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/tooltip.png',sizingMethod='scale');
}
    </style>
    <script type="text/javascript" src="http://www.google.com/jsapi"></script>
    <script type="text/javascript">google.load("jquery", "1.3.2");</script>
    <script type="text/javascript">
    $(function(){
      $("p.tooltip").hide()
      $("a").mouseover(function(){
        $("p.tooltip").show().css({
            "top":$(this).offset().top-20+"px",
            "left":$(this).offset().left+$(this).width()+10+"px"
        });
      }).mouseout(function(){
        //setTimeout関数を使う。
	//このコードでは、3000msec後に第一引数の関数（つまりtooltipクラスが適用されているタグの非表示処理）が実行されるようになっている。
        setTimeout(function(){
          $("p.tooltip").hide()
        },3000)
      })
    })
    </script>
  </head>
  <body>
    <h1>tooltip sample</h1>
    <p>Lorem ipsum (中略) <a href="http://ascii.jp/elem/000/000/438/438206/">tooltip sample</a> (中略) libero imperdiet sed.</p>
    <p>Proin adipiscing faucibus (中略)  est.</p>
    <p>Morbi faucibus (中略) a mi.</p>
    <p class="tooltip">これはASCII.jpの<br /><strong>Web制作の現場で使えるjQuery<br />UIデザイン入門</strong><br />のサンプルプログラムです</p>
  </body>
</html>

いいね〜。自宅の環境だとfirefoxでしか確認できないんだが、これでIEでも透過のツールチップが表示できるってことっすね。