bootstrap_learning/0660_tooltip.html at master · akicho8/bootstrap_learning · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<!-- ツールチップに画像を出すには？ -->
<!-- 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>