Tooltips

Sample Usage

Plain Text Anchor

Some anchor content
1
2
<span class="text-btn tooltipify" title="Some plain text tool tip content">Some anchor content</span>

Directions

 
 
 
 
 
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
34
35
36
37
<table class="tooltip-directions">
  <col width="33%" /><col width="33%" /><col width="33%" />
  <tr>
    <td>
      &nbsp;
    </td>
    <td>
      <div class="tooltipify" data-placement="top" title="Top"></div>
    </td>
    <td>
      &nbsp;
    </td>
  </tr>
  <tr>
    <td>
      <div class="tooltipify" data-placement="left" title="Left"></div>
    </td>
    <td>
      &nbsp;
    </td>
    <td>
      <div class="tooltipify" data-placement="right" title="Right"></div>
    </td>
  </tr>
  <tr>
    <td>
      &nbsp;
    </td>
    <td>
      <div class="tooltipify" data-placement="bottom" title="Bottom"></div>
    </td>
    <td>
      &nbsp;
    </td>
  </tr>
</table>

Rich Text Content

Kitty
1
2
3
4
5
6
7
8
9
10
<div class="tooltipify" data-placement="right">
  <img alt="Kitty" src="//placekitten.com/g/50/50" />
  <script class="tooltip-content" type="text/html">
    <strong><em>Messer</em></strong>
    <div>
      German for "knife," also<em>großes Messer</em> "great knife,"<em>Hiebmesser</em> "hewing knife,"<em>Kriegsmesser</em> "war knife," etc.
    </div>
  </script>
</div>