Image Specifications Style Guide Menu

Tooltips

The content to be contained in the tooltip is placed within the data-original-title=" Tooltip content "
class and data-placement attributes determine where the tooltip displays on user action.
e.g: For tooltip that displays over top: class=" top " and data-placement=" top "

Top Tooltip

What is Lorem Ipsum? Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley Tooltip on top of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.

Markup to copy/paste for Top Tooltips

<!-- Top tooltip -->
<a class="top" data-placement="top" data-toggle="tooltip" href="#" data-original-title="Tooltip on top" role="tooltip">Tooltip on top</a>

Bottom Tooltip

What is Lorem Ipsum? Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley Tooltip on bottom of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.

Markup to copy/paste for Bottom Tooltips

<!-- Bottom tooltip -->
<a class="bottom" data-placement="bottom" data-toggle="tooltip" href="#" data-original-title="Tooltip on bottom" role="tooltip">Tooltip on bottom</a>

Left Tooltip

What is Lorem Ipsum? Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley Tooltip to left of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.

Markup to copy/paste for Left Tooltips

<!-- Left tooltip -->
<a class="left" data-placement="left" data-toggle="tooltip" href="#" data-original-title="Tooltip to left" role="tooltip">Tooltip to left</a>

Right Tooltip

What is Lorem Ipsum? Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley Tooltip to right of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.

Markup to copy/paste for Right Tooltips

<!-- Right tooltip -->
<a class="right" data-placement="right" data-toggle="tooltip" href="#" data-original-title="Tooltip to right" role="tooltip">Tooltip to right</a>