Tooltips in Bootstrap

Goud.Kv
Posted by in Bootstrap category on for Intermediate level | Points: 250 | Views : 4173 red flag
Rating: 5 out of 5  
 1 vote(s)

Bootstrap is developed by Twitter Inc, and comes with predefined CSS and JavaScript. By using Bootstrap, we can design a very responsive website easily. It is very handy once you understand.
Recommendation
Read Dropdowns in Bootstrap before this article.

Introduction

Please read Bootstrap Introduction if you are new to Bootstrap.
Tool-tip shows the small description of the action in the web page. Bootstrap comes with some predefined Tool-tips that might be useful in our applications. 

Objective

The main objective of this article is to learn different types of Tooltips with Bootstrap.

Using Bootstrap code

We have to write little JavaScript to generate tooltips in Bootstrap.
Observe the below code that is used to display normal tooltip in your browser.

JavaScript:
<script type="text/javascript">
$(document).ready(function () {
    $(".tooltip-bar a").tooltip({
        placement : 'top'
    });
});
</script>
View Page:
<div class="bar">
    <ul class="tooltip-bar list-inline">
        <li><a href="#" class="btn btn-primary" data-toggle="tooltip" data-original-title="Home">Home</a></li>
        <li><a href="#" class="btn btn-success" data-toggle="tooltip" data-original-title="Tutorials">Tutorials</a></li>
        <li><a href="#" class="btn btn-warning" data-toggle="tooltip" data-original-title="Videos">Videos</a></li>
    </ul>
</div>
Run this combination in your browser to see the the following output with tooltips

Tooltips with Delay:
We can also set some delay to the tool-tip. Please go with below script to achieve that,
<script type="text/javascript">
$(document).ready(function () {
    $(".tooltip-bar a").tooltip({
        delay: { show : 1000 }
    });
});
</script>
and the View Page as follows,
<div class="bar">
    <ul class="tooltip-bar list-inline">
        <li><a href="#" class="btn btn-primary" data-toggle="tooltip" data-original-title="Home">Home</a></li>
        <li><a href="#" class="btn btn-success" data-toggle="tooltip" data-original-title="Tutorials">Tutorials</a></li>
        <li><a href="#" class="btn btn-warning" data-toggle="tooltip" data-original-title="Videos">Videos</a></li>
    </ul>
</div>
Now run and see the variation in your output in which the tooltip appears after 1 second,


Tooltips with Title from JavaScript:
We can also set tooltips from JavaScript that appears if there is no title given in the view code like below
<div class="bar">
    <ul class="tooltip-bar list-inline">
        <li><a href="#" class="btn btn-primary" data-toggle="tooltip">Home</a></li>
        <li><a href="#" class="btn btn-success" data-toggle="tooltip" data-original-title="Tutorials">Tutorials</a></li>
        <li><a href="#" class="btn btn-warning" data-toggle="tooltip" data-original-title="Videos">Videos</a></li>
    </ul>
</div>
And the JavaScript is,
<script type="text/javascript">
$(document).ready(function () {
    $(".tooltip-bar a").tooltip({
        title: "Hi, Welcome here"
    });
});
</script>
If you Observe the above code, we didn't given any title to the Home. So it will shows the title of the JavaScript like below


Tooltip Positions:
There is a placement property in Bootstrap's JavaScript that is used to set the position of the Tooltip.
Take a look at the below Script which explains the tooltip positions,
<script type="text/javascript">
$(document).ready(function () {
    $(".bar-top").tooltip({ placement: 'top' });
    $(".bar-right").tooltip({ placement: 'right' });
    $(".bar-bottom").tooltip({ placement: 'bottom' });
    $(".bar-left").tooltip({ placement: 'left' });
});
</script>
And the code in View Page as follows,
<div class="bar">
    <ul class="list-inline">
        <li><a href="#" class="btn btn-primary bar-top" data-toggle="tooltip" data-original-title="Home" data-placement="top">Home</a></li>
        <li><a href="#" class="btn btn-success bar-bottom" data-toggle="tooltip" data-original-title="Tutorials" data-placement="bottom">Tutorials</a></li>
        <li><a href="#" class="btn btn-warning bar-left" data-toggle="tooltip" data-original-title="Videos" data-placement="left">Videos</a></li>
        <li><a href="#" class="btn btn-danger bar-right" data-toggle="tooltip" data-original-title="Settings" data-placement="right">Settings</a></li>
    </ul>
</div>
If you run the above combination of code, you will see the output something like below in your browser,


Tooltip actions from JavaScript:
We can also show, hide, toggle or destroy the Tooltips manually with some JavaScript properties of Bootstrap.
Lets see the below code which explains such scenarios,
JavaScript:
<script type="text/javascript">
$(document).ready(function () {
    $(".show-bar").click(function () {
        $(".tooltip-bar a").tooltip('show');
    });
    $(".hide-bar").click(function () {
        $(".tooltip-bar a").tooltip('hide');
    });
    $(".toggle-bar").click(function () {
        $(".tooltip-bar a").tooltip('toggle');
    });
    $(".destroy-bar").click(function () {
        $(".tooltip-bar a").tooltip('destroy');
    });
});
</script>
View Page:
<div class="bar">
    <p class="tooltip-bar">
        <a href="#" class="btn btn-default" data-toggle="tooltip" title="Welcome to Home">Home</a>
    </p>
    <div>
        <p>Below are Tooltip actions from JavaScript</p>
        <input type="button" class="btn btn-success show-bar" value="Show" />
        <input type="button" class="btn btn-primary hide-bar" value="Hide" />
        <input type="button" class="btn btn-warning toggle-bar" value="Toggle" />
        <input type="button" class="btn btn-danger destroy-bar" value="Destroy" />
    </div>
</div>
Run the above code in your browser and you might see the output something like below


Conclusion

In this article, we have seen different properties of Tooltips in Bootstrap. If you have any doubts in this topic, please feel free to ask below.

Thanks for reading.

Regards,
Krishna.

Recommendation
Read Popovers in Bootstrap after this article.
Page copy protected against web site content infringement by Copyscape

About the Author

Goud.Kv
Full Name: Krishna Vamshi Goud
Member Level: Gold
Member Status: Member,MVP
Member Since: 2/12/2014 2:34:09 AM
Country: India
Thanks & Regards, Krishna


Login to vote for this post.

Comments or Responses

Login to post response

Comment using Facebook(Author doesn't get notification)