<p>
<script type="text/javascript">// <![CDATA[
jQuerOs(document).ready(function(){
   jQuerOs("#top").tooltip({placement : 'top'});
   jQuerOs("#right").tooltip({placement : 'right'});
   jQuerOs("#bottom").tooltip({placement : 'bottom'});
   jQuerOs("#left").tooltip({ placement : 'left'});
  });
// ]]></script>
</p>
<p></p>
<h3>Tooltip</h3>
<p><button style="margin-bottom: 20px;" type="button" class="btn btn-default" id="left" data-toggle="tooltip" data-placement="left" title="Tooltip on left">Tooltip on left</button>  <button style="margin-bottom: 20px;" type="button" class="btn btn-default" id="top" data-toggle="tooltip" data-placement="top" title="Tooltip on top">Tooltip on top</button>  <button style="margin-bottom: 20px;" type="button" class="btn btn-default" id="bottom" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">Tooltip on bottom</button>   <button style="margin-bottom: 20px;" type="button" class="btn btn-default" id="right" data-toggle="tooltip" data-placement="right" title="Tooltip on right">Tooltip on right</button> </p>
<div id="accordion1" class="accordion">
<div class="accordion-group">
<div class="accordion-heading"><a class="accordion-toggle" href="#collapse22" data-toggle="collapse" data-parent="#accordion22">How to use</a></div>
<div id="collapse22" class="accordion-body collapse">
<div class="accordion-inner">
<pre><code>
&lt;button type="button" class="btn btn-default" id="left" data-toggle="tooltip" data-placement="left" title="Tooltip on left"&gt;Tooltip on left&lt;/button&gt;
&lt;script type='text/javascript'&gt;
 jQuerOs(document).ready(function(){
   jQuerOs("#left").tooltip({ placement : 'left'});
  });
&lt;/script&gt;
</code></pre>
</div>
</div>
</div>
</div>
<p><br /><br /></p>
<h3>Popover</h3>
<p>
<script type="text/javascript">// <![CDATA[
jQuerOs(document).ready(function(){
    jQuerOs("div#top").popover({
        placement : 'top'
    });

    jQuerOs("div#bottom").popover({
        placement : 'bottom'
    });

    jQuerOs("div#left").popover({
        placement : 'left'
    });

    jQuerOs("div#right").popover({
        placement : 'right'
    });
});
// ]]></script>
</p>
<div class="row">
<div class="col-lg-3" style="margin-bottom: 20px;">
<div id="top" class="btn btn-md btn-danger" data-toggle="popover" title="Popover Demo" data-content="The size of the pop over depends upon the text area" role="button">Click to toggle popover top</div>
</div>
<div class="col-lg-3" style="margin-bottom: 20px;">
<div id="right" class="btn btn-md btn-danger" data-toggle="popover" title="Popover Demo" data-content="The size of the pop over depends upon the text area" role="button">Click to toggle popover right</div>
</div>
<div class="col-lg-3" style="margin-bottom: 20px;">
<div id="bottom" class="btn btn-md btn-danger" data-toggle="popover" title="Popover Demo" data-content="The size of the pop over depends upon the text area" role="button">Click to toggle popover bottom</div>
</div>
<div class="col-lg-3" style="margin-bottom: 20px;">
<div id="left" class="btn btn-md btn-danger" data-toggle="popover" title="Popover Demo" data-content="The size of the pop over depends upon the text area" role="button">Click to toggle popover left</div>
</div>
</div>
<div id="accordion20" class="accordion">
<div class="accordion-group">
<div class="accordion-heading"><a class="accordion-toggle" href="#collapse20" data-toggle="collapse" data-parent="#accordion20">How to use</a></div>
<div id="collapse20" class="accordion-body collapse">
<div class="accordion-inner">
<pre><code>
&lt;script  type='text/javascript'&gt;
  jQuerOs(document).ready(function(){
      jQuerOs(".DemoBS a").popover({
          placement : 'top'
      });
  });
&lt;/script&gt;

&lt;div class="DemoBS"&gt;
   &lt;div class="btn btn-md btn-danger" 
  data-toggle="popover" title="PopOver Demo" 
  data-content="The size of the pop over depends upon the text area"
  role="button"&gt;Click to toggle popover top&lt;/div&gt;
&lt;/div&gt;
</code></pre>
</div>
</div>
</div>
</div>