Code for creating Tooltip and Popover with Bootstrap

Tooltip and PopOvers are useful tips for user to displaying information. They help to reduce the page load and give much more information over hover. Below is code for creating it.
<!-- tooltip and popovers -->
<div class="container">
    <!-- tooltip -->
    <div class="row">
        <div class="col-md-12">

            <h2>Tooltips</h2><hr/>
            <a class="btn btn-primary" id="myTooltip" href="#" data-toggle="tooltip" data-placement="right" title="My Tool Tip Text">
                Tooltip
            </a>
        </div>
    </div>
    <!-- popovers -->
    <div class="row">
        <div class="col-md-12">
            <h2>Popover</h2><hr/>
            <button id="myPopOver" class="btn btn-danger" data-toggle="popover" title="PopOver Title" data-content="This will be the body text">
            </button>
        </div>
    </div>
</div>
Just above the end of body tag, copy and paste the below jquery code.
<script type="text/javascript">
    $('document').ready(function(){
        $('#myTooltip').tooltip();
        $('myPopOver').popover();
    });
</script>
DEMO:

fig: Tooltip and Popover with Bootstrap