Tooltip
Default Tooltip
Static Example
Tooltip on the top
Tooltip on the bottom
Tooltip on the left
Tooltip on the right
Example
Html
<div class="row text-center">
<div class="col-sm-6 col-lg-3 mb-3">
<button class="btn btn-secondary" data-placement="top" data-toggle="tooltip" title="Tooltip on top" type="button">Hover me</button>
</div>
<div class="col-sm-6 col-lg-3 mb-3">
<button class="btn btn-secondary" data-placement="bottom" data-toggle="tooltip" title="Tooltip on Bottom" type="button">Hover me</button>
</div>
<div class="col-sm-6 col-lg-3 mb-3">
<button class="btn btn-secondary" data-placement="left" data-toggle="tooltip" title="Tooltip on left" type="button">Hover me</button>
</div>
<div class="col-sm-6 col-lg-3 mb-3">
<button class="btn btn-secondary" data-placement="right" data-toggle="tooltip" title="Tooltip on right" type="button">Hover me</button>
</div>
</div>
Color Tooltip
Static Example
Tooltip on the top
Tooltip on the bottom
Tooltip on the left
Tooltip on the right
Example
Html
<div class="row text-center">
<div class="col-sm-6 col-lg-3">
<button class="btn btn-secondary" data-placement="top" data-toggle="tooltip-primary" title="Tooltip on top" type="button">Hover me</button>
</div>
<div class="col-sm-6 col-lg-3 mg-t-30 mg-sm-t-0">
<button class="btn btn-secondary" data-placement="bottom" data-toggle="tooltip-primary" title="Tooltip on bottom" type="button">Hover me</button>
</div>
<div class="col-sm-6 col-lg-3 mg-t-30 mg-lg-t-0">
<button class="btn btn-secondary" data-placement="left" data-toggle="tooltip-primary" title="Tooltip on left" type="button">Hover me</button>
</div>
<div class="col-sm-6 col-lg-3 mg-t-30 mg-lg-t-0">
<button class="btn btn-secondary" data-placement="right" data-toggle="tooltip-primary" title="Tooltip on right" type="button">Hover me</button>
</div>
</div>