Popovers in Bootstrap

Goud.Kv
Posted by in Bootstrap category on for Intermediate level | Points: 250 | Views : 4623 red flag

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 Tooltips in Bootstrap before this article.

Introduction

Please read Bootstrap Introduction if you are new to Bootstrap.
So far we have seen Tooltips in Bootstrap Tooltips. There are some popovers which can be triggered through JavaScript in Bootstrap.

Objective

The main objective of this article is to learn different types of popovers in Bootstrap.

Using Bootstrap code

We have to write little JavaScript code to create Popovers for HTML elements. Lets see one by one starting with normal popover below,
JavaScript:
<script type="text/javascript">
$(document).ready(function () {
    $(".popover-pop a").popover()
});
</script>
HTML:
<div>
    <ul class="popover-pop list-inline">
        <li><a href="#" class="btn btn-primary" data-toggle="popover" title="DotNetFunda" data-content="Fundamentals of .Net">DotNetFunda</a></li>
    </ul>
</div>
Run the above combination of code to get a popover for link like below

We can see the Title and Description in the popover meanwhile, we can set them in HTML code.

Popovers with Delay:
We can also set some delay to the popovers. For that, we have to use delay property of Bootstrap. Take a look at the below example of JavaScript and Html.
<script type="text/javascript">
$(document).ready(function () {
    $(".popover-pop a").popover({
        delay: { show : 1000 }
    });
});
</script>
and HTML as follows,
<div>
    <ul class="popover-pop list-inline">
        <li><a href="#" class="btn btn-success" data-toggle="popover" title="DotNetFunda" data-content="Fundamentals of .Net">DotNetFunda</a></li>
    </ul>
</div>
If you run this code in your browser, you will see the output something like below


Popover with Title from JavaScript:
We can also set title to the popovers from JavaScript as we did for tooltips. See the below JavaScript that is similar to that of tooltips
<script type="text/javascript">
$(document).ready(function () {
    $(".popover-pop a").popover({
        title : "Title from Script"
    });
});
</script>
and HTML as,
<div>
    <ul class="popover-pop list-inline">
        <li><a href="#" class="btn btn-primary" data-toggle="popover" title="DotNetFunda" data-content="Fundamentals of .Net">DotNetFunda</a></li>
        <li><a href="#" class="btn btn-primary" data-toggle="popover" data-content="Fundamentals of .Net">DotNetFunda</a></li>
    </ul>
</div>
This combination will gives you the title from JavaScript only if there is no title given in HTML.


Popovers with Triggering:
We can also set the popover to come on Hover or Click. By default it is on Click mode. If you want to make it function on Hover, lets go with below approach
<script type="text/javascript">
$(document).ready(function () {
    $(".popover-pop a").popover({
        trigger : 'hover'
    });
});
</script>
and HTML as,
<div>
    <ul class="popover-pop list-inline">
        <li><a href="#" class="btn btn-primary" data-toggle="popover" title="DotNetFunda" data-content="Fundamentals of .Net">DotNetFunda</a></li>
    </ul>
</div>
Now run and see this combination in your browser and it will be something like below


Popover Positions:
Like Tooltips, we have placement property for popovers in Bootstrap. Observe the below code that comes with different positions of popovers
<script type="text/javascript">
$(document).ready(function () {
    $(".popover-top").popover({
        placement: 'top'
    });
    $(".popover-bottom").popover({
        placement: 'bottom'
    });
    $(".popover-left").popover({
        placement: 'left'
    });
    $(".popover-right").popover({
        placement: 'right'
    });
});
</script>
and your HTML as,
<div>
    <ul class="list-inline">
        <li><a href="#" class="btn btn-primary popover-left" data-toggle="popover" title="DotNetFunda" data-content="Fundamentals of .Net">DotNet Funda</a></li>
        <li><a href="#" class="btn btn-success popover-top" data-toggle="popover" title="ITFunda" data-content="IT Training & Placement">IT Funda</a></li>
        <li><a href="#" class="btn btn-warning popover-bottom" data-toggle="popover" title="KidsFunda" data-content="Fundamentals for Kids">Kids Funda</a></li>
        <li><a href="#" class="btn btn-danger popover-right" data-toggle="popover" title="FundooVideo" data-content="Vidoes you are looking">Fundoo Video</a></li>
    </ul>
</div>
If you observe JavaScript above, we have different placements like top, bottom, right and left. This combination of code will gives you the following result



Popover actions from JavaScript:
We have show, hide, toggle and destroy properties from which we can do actions manually for popovers.
Take a look at the below code to understand them clearly
<script type="text/javascript">
$(document).ready(function () {
    $(".show-popover").click(function () {
        $(".popover-pop a").popover('show');
    });
    $(".hide-popover").click(function () {
        $(".popover-pop a").popover('hide');
    });
    $(".toggle-popover").click(function () {
        $(".popover-pop a").popover('toggle');
    });
    $(".destroy-popover").click(function () {
        $(".popover-pop a").popover('destroy');
    });
});
</script>
and HTML,
<div>
    <p class="popover-pop list-inline">
        <a href="#" class="btn btn-info" data-toggle="popover" title="DotNetFunda" data-content="Fundamentals of .Net">DotNetFunda</a>
    </p>
    <div>
        <input type="button" class="btn btn-primary show-popover" value="Show" />
        <input type="button" class="btn btn-success hide-popover" value="Hide" />
        <input type="button" class="btn btn-warning toggle-popover" value="Toggle" />
        <input type="button" class="btn btn-danger destroy-popover" value="Destroy" />
    </div>
</div>
Check out this in your browser and you might see the following actions in your Output

These actions works through JavaScript of Bootstrap.

Conclusion

In this article, we have seen different types of popovers in Bootstrap. Hope you understand. If you have any doubt in this topic, please feel free to ask below.

Thanks for reading.

Regards,
Krishna.


Recommendation
Read Alerts 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)