How To Create Tooltips Using Bootstrap

In this article, we shall see how to create simple tooltips using Bootstrap.

First, it is essential to know what  ToolTip is:

A Tooltip is a tiny popup which appears when user places the mouse pointer over an element, say something like buttons, links or on text etc.

Tooltips are very useful for new users of our websites, since they enable the user to know the purpose of buttons and links by placing the mouse pointer over them.

Syntax 

<script type="text/javascript">
    $(document).ready(function() {
        $('[data-toggle="tooltip"]').tooltip({
            placement: 'top'
        });
    });
</script>

Style 

<style type="text/css">
    .bs-example {
        margin: 100px 50px;
    }
</style>

To Use Tooltip and popovers we must initialize them ourselves

Output

There are few options which can be passed to tooltip() bootstrap method to customize the functionality of tooltip

Placement

It sets the position of tooltip-top,bottom,left,right.

Title

Sets the default title if its title attribute is not present.

Trigger

Shows how tooltips are triggered