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
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<div class="tooltipify" data-placement="top">
  <img alt="Kitty" src="//placekitten.com/g/50/50" />
  <script class="tooltip-content" type="text/html">
    <div class="text-left" style="min-width: 320px;">
      <div class="u-font-weight-bold u-space-bottom-2">
        Jacket Shell
      </div>
      <div class="row row--narrow u-space-bottom-4">
        <div class="col--sm-1-of-2 col--md-1-of-2 col--lg-1-of-2">
          <div class="pushbutton pushbutton--selected">
            Cottom
          </div>
        </div>
        <div class="col--sm-1-of-2 col--md-1-of-2 col--lg-1-of-2">
          <div class="pushbutton pushbutton--selectable">
            Wool
          </div>
        </div>
      </div>
      <div class="c-havelock u-font-weight-bold t-tiny-body-sans">
        Cancel
      </div>
    </div>
  </script>
</div>

Full-width Tooltip on LG only

Kitty
1
2
3
4
5
6
7
<div class="tooltipify" data-full-width-lg="true" data-placement="bottom">
  <img alt="Kitty" src="//placekitten.com/g/70/50" />
  <script class="tooltip-content" type="text/html">
    This tooltip will be full-width on LG only. 
  </script>
</div>

Full-width Tooltip on multiple breakpoints

Kitty
1
2
3
4
5
6
7
<div class="tooltipify" data-full-width-md="true" data-full-width-sm="true" data-placement="bottom">
  <img alt="Kitty" src="//placekitten.com/g/90/60" />
  <script class="tooltip-content" type="text/html">
    This tooltip will be full-width on MD and SM. 
  </script>
</div>

Full-width Tooltip with conflicting placement

Kitty
1
2
3
4
5
6
7
<div class="tooltipify" data-full-width-lg="true" data-full-width-md="true" data-full-width-sm="true" data-placement="left">
  <img alt="Kitty" src="//placekitten.com/g/140/50" />
  <script class="tooltip-content" type="text/html">
    Tooltips will ignore the full-width option when placement is set to left or right. 
  </script>
</div>