Tooltips

Used to specify extra information about an element to aid the the user ona needed basis.

Tooltip

This is a tooltip on top

Above

This is a tooltip on the bottom

Below

This is a tooltip on the right

Right

This is a tooltip on the left

Left

<!-- Top Tooltip -->
<div class="tool-tip top">
<p>This is a tooltip on top</p>
</div>

<!-- Bottom Tooltip -->
<div class="tool-tip bottom">
<p>This is a tooltip on the bottom</p>
</div>

<!-- Left Tooltip -->
<div class="tool-tip left">
<p>This is a tooltip on the left</p>
</div>

<!-- Right Tooltip -->
<div class="tool-tip right">
<p>This is a tooltip on the right</p>
</div>

Text-tip

If you have a block of copy, try using a text-tip. This is a tooltip on top

It can also appear below This is a tooltip on the bottom the block of text.

You may need it on the right. This is a tooltip on the left

Or if you need it on the left. This is a tooltip on the right

<!-- Top Text-tip -->
<div class="tool-tip top">
<p>This is a tooltip on top</p>
</div>

<!-- Bottom Text-tip -->
<div class="tool-tip bottom">
<p>This is a tooltip on the bottom</p>
</div>

<!-- Left Text-tip -->
<div class="tool-tip left">
<p>This is a tooltip on the left</p>
</div>

<!-- Right Text-tip -->
<div class="tool-tip right">
<p>This is a tooltip on the right</p>
</div>