jQuery Tools Tooltipの中身にHTMLを表示するできるだけシンプルなサンプル

HTMLだけでツールチップを表示したいのだけど、どうしたらいいかな?と調べていて、jQuery Tools Tooltipが良さそうだなぁという結論に。

jQuery Tooltip @ jQuery TOOLS - Tooltips done right

別に大したことをするつもりはないが、ツールチップの中身にHTMLを表示するというのは必須だ。jQuery Toolsのサイトにもチュートリアルがある。

Using any HTML inside the tooltip

しかし、実際にやってみていくつかポイントがあったので、HTMLにコメントしながら、できるだけシンプルに書こうとしたのがこれ。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF8">
    <title>jQuery Tools Tooltipでツールチップの中身にHTMLを表示するテスト</title>

    <!-- jQuery Toolsを読み込み CDNバージョン(これを読み込むだけでjQueryとtoolsも使えるようになる) -->
    <script src="http://cdn.jquerytools.org/1.2.5/full/jquery.tools.min.js"></script>

    <!-- tooltipスタイル(.tooltipはjQueryToolsTooltipのデフォルトでツールチップの表示に使用するよう設定されている)-->
    <style>
      .tooltip {
          display:none;
          background:transparent url(http://static.flowplayer.org/tools/img/tooltip/white_arrow_big.png);
          height:166px;
          width:320px;
          padding:25px;
          font-size:14px;
          color:#333333;
      }
    </style>

  </head>
  <body>
    <div align="center" style="margin:250px;">

      <!-- ターゲットとなる画像 -->
      <a id="target" href="http://creativecommons.org">
        <img src="http://mirrors.creativecommons.org/presskit/logos/cc.logo.large.png" border="0" width="240" height="57"/>
      </a>

      <!-- ターゲットにオーバーした時にツールチップの中に表示するHTML(ターゲットとなるオブジェクトのタグのすぐ後に書くのと、classにtooltipを設定するのがミソ) -->
      <div class="tooltip">
        <div align="center">
          <img src="http://mirrors.creativecommons.org/presskit/logos/cc.logo.large.png" width="240" height="57" style="margin:10px;"/><br/>
          <div>CreativeCommonsのホームページへ飛びます</div>
        </div>
      </div>

      <!-- Tooltip起動スクリプト -->
      <script language="JavaScript1.2" type="text/javascript">
        $(document).ready(function() {
          $("#target").tooltip({
            offset:[-15, 0],
            effect: 'slide',
            predelay: "500"
          });
        });
      </script>

    </div>
  </body>
</html>

実際に動かすと、こうなる。

jQuery Tools Tooltipでツールチップの中身にHTMLを表示するテスト

本当はこの記事の中で動かしたかったけど、Bloggerが何か影響しているのか無理っぽい。

コメント

このブログの人気の投稿

レオナルド・ダ・ビンチはなぜノートを「鏡文字」で書いたのか?

macでsmb(samba)共有サーバーに別名で接続(別アカウント名で接続)する方法

Google DriveにCURLでアップロードするには?