---

categories: [Widgets]

layout: page

title: Tooltip

resource: true

---

<div class="tooltip-demo">

<a href="#" class="btn btn-default" data-toggle="tooltip" data-original-title="Caribbean Monk Seal, Barbary Lion, Seaside Sparrow">Caribbean Monk Seal, Barbary L...</a>

</div>

<br>

<h2>Tooltip Directions</h2>

<div class="tooltip-demo">

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pretium mi at ante luctus dapibus. Fusce in tempus felis. Suspendisse tristique diam vel.</p>

<div class="bs-example-tooltips">

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="" data-original-title="Tooltip on left">Tooltip on left</button>

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="Tooltip on top">Tooltip on top</button>

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">Tooltip on bottom</button>

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right" title="" data-original-title="Tooltip on right">Tooltip on right</button>

</div>

<p style="margin-top: 10px;">Suspendisse tristique diam vel hendrerit aliquet. Vestibulum laoreet nisi ac egestas porttitor. Donec tempus elit convallis.</p>

</div>

<script>

// Initialize Tooltip

$(document).ready(function() {

$('.tooltip-demo').tooltip({

selector: "[data-toggle=tooltip]",

container: "body"

});

});

</script>