Edit in JSFiddle

$("[data-toggle=tooltip").tooltip();

<h2 class="cen">Bootstrap : Tooltip </h2>
<br/>
<div class="pad cen">
    <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="Tooltip : left">Tooltip : Left</button>
    <button type="button" class="btn" data-toggle="tooltip" data-placement="top" title="Tooltip on top">Tooltip : Top</button>
    <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="Tooltip : bottom">Tooltip : Bottom</button>
    <button type="button" class="btn btn-sm" data-toggle="tooltip" data-placement="right" title="Tooltip : right">Tooltip : Right</button>
</div>























<!-- Omit this part : Just a footer -->
<div style="position:fixed;bottom:10px;left:10px;background:#4679BC;padding:4px;border-radius:2px;border:1px solid #4679AA"><a href="http://code2care.org" title="more ..." style="padding:5px;text-decoration:none;font-size:12px;color:#fff;letter-spacing: 1.5px;">Code2care</a>
</div>

.pad {
    padding:80px
}
.cen {
    text-align:center
}