<p><a class="tooltip_link" href="#" title="Top tooltip" rel="tooltip" data-placement="top" data-toggle="tooltip">Top tooltip</a> <a class="tooltip_link" href="#" title="Right tooltip" rel="tooltip" data-placement="right" data-toggle="tooltip">Right tooltip</a> <a class="tooltip_link" href="#" title="Bottom tooltip" rel="tooltip" data-placement="bottom" data-toggle="tooltip">Bottom tooltip</a> <a class="tooltip_link" href="#" title="Left tooltip" rel="tooltip" data-placement="left" data-toggle="tooltip">Left tooltip</a></p>
<div style="clear: both;"> </div>
<div id="accordion2" class="accordion">
<div class="accordion-group">
<div class="accordion-heading"><a class="accordion-toggle" href="#collapseOne" data-toggle="collapse" data-parent="#accordion2">How to use</a></div>
<div id="collapseOne" class="accordion-body collapse">
<div class="accordion-inner">
<pre><code>
&lt;script type='text/javascript'&gt;
     jQuery(document).ready(function () {
     if (jQuery("[rel=tooltip]").length) {
     jQuery("[rel=tooltip]").tooltip();
     }
   });
  &lt;/script&gt;
&lt;a class="tooltip_link" rel="tooltip" href="#" data-placement="top" data-toggle="tooltip" title="Top tooltip"&gt;Top tooltip&lt;/a&gt;
&lt;a class="tooltip_link" rel="tooltip" href="#" data-placement="right" data-toggle="tooltip" title="Right tooltip"&gt;Right tooltip&lt;/a&gt;
&lt;a class="tooltip_link" rel="tooltip" href="#" data-placement="bottom" data-toggle="tooltip" title="Bottom tooltip"&gt;Bottom tooltip&lt;/a&gt;
&lt;a class="tooltip_link" rel="tooltip" href="#" data-placement="left" data-toggle="tooltip" title="Left tooltip"&gt;Left tooltip&lt;/a&gt;
</code>
</pre>
</div>
</div>
</div>
</div>