Tooltips
Sample Usage
Plain Text Anchor
Directions
View Source
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> </td> <td> <div class="tooltipify" data-placement="top" title="Top"></div> </td> <td> </td> </tr> <tr> <td> <div class="tooltipify" data-placement="left" title="Left"></div> </td> <td> </td> <td> <div class="tooltipify" data-placement="right" title="Right"></div> </td> </tr> <tr> <td> </td> <td> <div class="tooltipify" data-placement="bottom" title="Bottom"></div> </td> <td> </td> </tr> </table> |
Rich Text Content
View Source
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
Full-width Tooltip on multiple breakpoints
Full-width Tooltip with conflicting placement
View Source
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> |