Tooltips in Bootstrap

How to create tooltips in Bootstrap?

Tooltips

Tooltips are the small pop up box which appears when user place the mouse on the element or the tooltip is a small description of the action appears in the webpage

 <head>
    <script type="text/javascript">
    $(document).ready(function () {
        $(".tooltip-bar a").tooltip({
            placement: 'top'
        });
    });
    </script>
</head>
<body>
   <h2>Tooltips</h2>
    <div class="well">
        <ul class="tooltip-bar list-inline">
            <li><a href="#" class="btn btn-primary" data-toggle="tooltip" data-original-title="Home">DotNetFunda</a></li>
            <li><a href="#" class="btn btn-danger" data-toggle="tooltip" data-original-title="Tutorials">TechFunda</a></li>
            <li><a href="#" class="btn btn-warning" data-toggle="tooltip" data-original-title="Online Training">ITFunda</a></li>
        </ul>
    </div>
</body>

In the above code snippet we have defined the tooltip placing in the top
In the body of HTML page we have class attribute value as well in the div, class attribut value tooltip-bar in the ul element and list-inline is used to get the values in the line
In the li element we have created three buttons with btn-primary, btn-danger, btn-warning, data-toggle as tooltip and data-original-title defines the value in the tooltip, the list values are DotNetFunda, TechFunda and ITFunda
In the head section of the HTML page we are having the script function and jQuery to get the tooltip
In the next line we are calling the function $(".tooltip-bar a") calls the function of the body section with placement: 'top' which gets the tooltip in the top of the button

output

Tooltips with delay

Tooltips with delay is used to delay the tooltip on the page

 <head> <script type="text/javascript">
    $(document).ready(function () {
        $(".tooltip-bar a").tooltip({
            delay:{show:1000}
        });
    });
    </script>
</head>
<body>
   <h2>Tooltips with delay</h2>
    <div class="well">
        <ul class="tooltip-bar list-inline">
            <li><a href="#" class="btn btn-primary" data-toggle="tooltip" data-original-title="Home">DotNetFunda</a></li>
            <li><a href="#" class="btn btn-danger" data-toggle="tooltip" data-original-title="Tutorials">TechFunda</a></li>
            <li><a href="#" class="btn btn-warning" data-toggle="tooltip" data-original-title="Online Training">ITFunda</a></li>
        </ul>
    </div>
</body>

Tooltips with delay

In the above code snippet we have defined the tooltip delay
In the body of HTML page we are having the class attribute value as well in the div and we have class attribute value as tooltip-bar in the ul element and list-inline is used to get the values in the line
In the li element we have created three buttons with btn-primary, btn-danger, btn-warning, data-toggle as tooltip and data-original-title defines the value in the tooltip, the list values are DotNetFunda, TechFunda and ITFunda
In the head section of the HTML page we are having the script function and jQuery to get the tooltip
In the next line we are calling the function as $(".tooltip-bar a") calls the function of the body section with class attribute tooltip-bar and delay:{show:1000} gets the tooltip delay with value 1000

output

Tooltips with title

Title defines value in the tooltip

<script type="text/javascript">
    $(document).ready(function () {
        $(".tooltip-bar a").tooltip({
            title: 'Hai Welcome to bootstrap'
        });
    });
    </script>
</head>
<body>
   <h2>Tooltips with title</h2>
    <div class="well">
        <ul class="tooltip-bar list-inline">
            <li><a href="#" class="btn btn-primary" data-toggle="tooltip">DotNetFunda</a></li>
            <li><a href="#" class="btn btn-danger" data-toggle="tooltip" data-original-title="Tutorials">TechFunda</a></li>
            <li><a href="#" class="btn btn-warning" data-toggle="tooltip" data-original-title="Online Training">ITFunda</a></li>
        </ul>
    </div>
</body>

Tooltip with title

In the above code snippet we have defined the tooltip with title
In the bodysection og HTML page we are having the value of class attribute as well in the div and we have class attribute value tooltip-bar in the ul element and list-inline is used to get the values in the line
In the li element we have created three buttons with btn-primary, btn-danger, btn-warning, data-toggle as tooltip and, we have given data-original-title to only li element values TechFunda and ITFunda
In the head section of the HTML page we are having the script function and jQuery to get the tooltip
In the next line we are calling the function as $(".tooltip-bar a") calls the function of the body section with class attribute tooltip-bar and title:"Hai welcome to bootstrap" applies to the li element value DotNetFunda

output

Tooltip positions

Tooltip position is used to place the value in the top, bottom, left and right side

<head>
<script type="text/javascript">
        $(document).ready(function(){
            $(".well-bottom").tooltip({placement:'bottom'});
            $(".well-left").tooltip({placement:'left'});
            $(".well-top").tooltip({placement:'top'});
            $(".well-right").tooltip({placement:'right'});
        });
    </script>
</head>
<body>
   <h2>Tooltips with placement using closing alert</h2>
    <div class=" alert alert-success">
        <div class="well">
            <a href="#" class="close" data-dismiss="alert">&times;</a>
            <ul class="list-inline">
                <li><a href="#" class="btn btn-primary well-bottom" data-toggle="tooltip" data-original-title="Forums">DotNetFunda</a></li>
                <li><a href="#" class="btn btn-danger well-left" data-toggle="tooltip" data-original-title="Tutorials">TechFunda</a></li>
                <li><a href="#" class="btn btn-warning well-top" data-toggle="tooltip" data-original-title="Online Training">ITFunda</a></li>
                <li><a href="#" class="btn btn-success well-right" data-toggle="tooltip" data-original-title="Kids">KidsFunda</a></li>
            </ul>
        </div>
    </div>
</body>

Tooltip with placement

In the above code snippet we have created tooltips to place in right, left, top, bottom using closing alert
In the body section of HTML page we have class attribute value as alert alert-success in the div , we have class attribute value as well in the div
In the next line we are having the anchor tag to close the alert using class attribute value as close and data-dismiss as alert
In the next line we are having the class with attribute value as list-inline in the ul element, we have list values in the ul elements with button colors with well bottom, right, left, top with values dotnetfunda, techfunda, itfunda and KidsFunda with data-toggle as tooltip and data-original-title with given value
In the head section of the HTML page we have the script function and jQuery to get the placement of the tooltip, we have the function as wellbottom, ,welltop, wellright, wellleft, .toolip calls the body function in the head section

output

Tooltip actions

Tooltips are the actions performed by javascript

<script type="text/javascript">
    $(document).ready(function () {
        $(".show-well").click(function () {
            $(".tooltip-bar a").tooltip('show');
        });
        $(".hide-well").click(function () {
            $(".tooltip-bar a").tooltip('hide');
        });
        $(".toggle-well").click(function () {
            $(".tooltip-bar a").tooltip('toggle');
        });
        $(".destroy-well").click(function () {
            $(".tooltip-bar a").tooltip('destroy');
        });
    });
    </script>
</head>
<body>
   <h2>Tooltips actions</h2>
    <div class=" alert  alert-danger">
        <div class="well">
            <p class="tooltip-bar">
                <a href="#" class="btn btn-default" data-toggle="tooltip" data-original-title="Welcome to Home">Home</a>
            </p>
            <div>
                <p>Below are Tooltip actions from JavaScript</p>
                <input type="button" class="btn btn-success show-well" value="Show" />
                <input type="button" class="btn btn-primary hide-well" value="Hide" />
                <input type="button" class="btn btn-warning toggle-well" value="Toggle" />
                <input type="button" class="btn btn-danger destroy-well" value="Destroy" />
            </div>
        </div>
    </div>
</body>

Tooltip actions

In the above code snippet we have defines the tooltip actions using script
In the body section of HTML page we have class attribute value as alert-danger , class attribute value as well in the nother div
In the next line we are having the <p> paragraph with class tooltip-bar and we have created the tooltip to default button with value Home using class attribute value as btn default and data-toggle as tooltip and data-original-title as the given value
In the next line we are having the another div and we have created buttons with colors and created show-well, hide-well, toggle-well, destroy-well in the buttons
In the head section of HTML page we have script function and jQuery to call the function of the bosy in the head section
In the next line we are having the function show-well, hide-well, toggle-well, destroy-well with .tooltip(show, hide, toggle, destroy) which performs the functions as per given values