Bootstrap tooltip sample

Bootstrap sample

by manoj

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<div class="kcb-sample">
    
<button type="button" class="btn btn-default" id="btnL"
    data-toggle="tooltip"
    data-placement="left"
    title="Tooltip on left">Tooltip on left</button>&nbsp;
    
<button type="button" class="btn btn-default" id="btnT"
    data-toggle="tooltip"
    data-placement="bottom"
    title="<h1><b>Another</b> <em>one</em> here too</h1>" data-html="true">Tooltip on top</button>&nbsp;
    
<button type="button" class="btn btn-default" id="btnB"
    data-toggle="tooltip"
    data-placement="bottom"
    title="Tooltip on bottom">Tooltip on bottom</button>&nbsp;
    
<button type="button" class="btn btn-default" id="btnR"
    data-toggle="tooltip"
    data-placement="right"
    title="Tooltip on right <span style='color:#0f0'>sample</span>">Tooltip on right</button>
<hr />
<a id="linkA" href="#"
    data-toggle="tooltip"
    title="Some tooltip text!">Hover over me</a>
<hr />
<button type="button" class="btn btn-default" id="btnClick"
    data-placement="right"
    title="Tooltip by click">Click Trigger</button>
    
</div>

CSS

.kcb-sample {
    margin:40px 100px;
}

JavaScript

$('#btnL').tooltip();
$('#btnT').tooltip({animation: false});
$('#btnB').tooltip({delay: { show:500, hide:100}});
$('#btnR').tooltip({html:true});

$('#linkA').tooltip();

$('#btnClick').tooltip({trigger:'click'});