if you are new to Bootstrap.
. There are some popovers which can be triggered through JavaScript in Bootstrap.
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.
Krishna.