Version 3.0.6

Tooltips

Tooltips are labels that appear on hover and focus when the user hovers over an element with the cursor, focuses on an element using a keyboard (usually through the tab key), or upon touch (without releasing) in a touch UI. They contain textual identification for the element in question. They may also contain brief helper text regarding the function of the element. The label itself cannot receive input focus.

Note: Tooltips don’t display rich information including images and formatted text.

Tooltip example
Larger tooltip example. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                      
<div class="tooltip bottom">
<div class="tooltip-inner">Tooltip example</div>
</div>
<div class="tooltip bottom">
<div class="tooltip-inner">Larger tooltip example. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</div>
447Opens
0.01%Bounce
0.02%Unsub.
0.01%Spam
                      
<div class="tooltip tooltip-stats">
<span class="tooltip-data">447</span>
<span class="tooltip-text">Opens</span>
</div>
<div class="tooltip tooltip-stats">
<div class="tooltip-stat-block">
<span class="tooltip-data">0.01%</span>
<span class="tooltip-text">Bounce</span>
</div>
<div class="tooltip-stat-block">
<span class="tooltip-data">0.02%</span>
<span class="tooltip-text">Unsub.</span>
</div>
<div class="tooltip-stat-block">
<span class="tooltip-data">0.01%</span>
<span class="tooltip-text">Spam</span>
</div>
</div>

Requires Angular to be referenced on the page. Additionally, the ng-app property must be assigned and the controller must have the angular bootstrap plugin associated with it.

                      
<a href="javascript:void(0);" uib-tooltip="Default/Top Positioned Tooltip.">Hover for Tooltip (Top)</a>
<br />
<a href="javascript:void(0);" uib-tooltip="Bottom Positioned Tooltip." tooltip-placement="bottom">Hover for Tooltip (Bottom)</a>
<br />
<a href="javascript:void(0);" uib-tooltip="Left Positioned Tooltip." tooltip-placement="left">Hover for Tooltip (Left)</a>
<br />
<a href="javascript:void(0);" uib-tooltip="Right Positioned Tooltip." tooltip-placement="right">Hover for Tooltip (Right)</a>

Search Results

Powered by