0660_tooltip.html

<!-- ツールチップに画像を出すには？ -->
<!-- html:true にしてtitle属性に埋め込む -->
<!-- .muted を指定すると色が薄くなる -->
<!-- rel="tooltip" は必須ではない -->
<!doctype html>
<html>
  <head>
    <meta charset="UTF-8" />
    <link href="assets/bootstrap.css" media="screen" rel="stylesheet" type="text/css" />
    <script src="assets/jquery.js" type="text/javascript"></script>
    <script src="assets/coffee-script.js" type="text/javascript"></script>
    <script src="assets/bootstrap.js" type="text/javascript"></script>
    <script type="text/coffeescript">
      $ ->
        $("[rel=tooltip]").tooltip
          animation: true          # フェイドイン・アウトするか？
          placement: "bottom"      # 表示場所
          title: "代替テキスト"    # title属性がない場合の代替テキスト
          trigger: "hover"         # 表示するタイミング
          delay: {show:0,hide:100} # 表示までのディレイと消えるまでディレイ
    </script>
  </head>
  <body>
    <div class="container">
      <p class="muted" style="margin-top:64px">
        <a href="#" rel="tooltip" title="titleタグの内容">titleタグの値を表示</a>
        <span href="#" rel="tooltip" title="titleタグの内容">aタグでなくてもよい</span>
        <a href="#" rel="tooltip">titleがないので代替テキストを表示</a>
        <a href="#" rel="tooltip" title="<img src='assets/0001.jpg' width=128 />">titleに画像を埋める</a>
      </p>
    </div>
  </body>
</html>