Four options are available: top, right, bottom, and left aligned.
<div class="bd-example bd-example-tooltip-static">
- <div class="tooltip top" role="tooltip">
+ <div class="tooltip tooltip-top" role="tooltip">
<div class="tooltip-arrow"></div>
<div class="tooltip-inner">
Tooltip on the top
</div>
</div>
- <div class="tooltip right" role="tooltip">
+ <div class="tooltip tooltip-right" role="tooltip">
<div class="tooltip-arrow"></div>
<div class="tooltip-inner">
Tooltip on the right
</div>
</div>
- <div class="tooltip bottom" role="tooltip">
+ <div class="tooltip tooltip-bottom" role="tooltip">
<div class="tooltip-arrow"></div>
<div class="tooltip-inner">
Tooltip on the bottom
</div>
</div>
- <div class="tooltip left" role="tooltip">
+ <div class="tooltip tooltip-left" role="tooltip">
<div class="tooltip-arrow"></div>
<div class="tooltip-inner">
Tooltip on the left
<a href="#" data-toggle="tooltip" title="Some tooltip text!">Hover over me</a>
<!-- Generated markup by the plugin -->
-<div class="tooltip top" role="tooltip">
+<div class="tooltip tooltip-top" role="tooltip">
<div class="tooltip-arrow"></div>
<div class="tooltip-inner">
Some tooltip text!