Bootstrap Popover

Popover is a small overlay of content that is used to display secondary information of any element when it is clicked by a user.
Triggering the Popovers:
Popovers can be triggered via JavaScript — just call the popover() Bootstrap method with the “id” or “class” selector of the required element in JavaScript code.
Let us see how can we trigger the popover and what will be the output in the following simple example.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example of Twitter Bootstrap 3 Popover</title>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap-theme.min.css">
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $(".popover-examples a").popover({
        placement : 'top'
    });
});
</script>
<style type="text/css">
	.bs-example{
    	margin: 150px 50px;
    }
</style>
</head>
<body>
<div class="bs-example"> 
    <ul class="popover-examples list-inline"> 
        <li><a href="#" class="btn btn-primary" data-toggle="popover" title="Popover title" data-content="Default popover">Popover</a></li>
        <li><a href="#" class="btn btn-success" data-toggle="popover" title="Popover title" data-content="Another popover">Another popover</a></li>
        <li><a href="#" class="btn btn-warning" data-toggle="popover" title="Popover title" data-content="The last tip!">Last popover</a></li>
    </ul>
</div>
</body>
</html>       

popover-top

Setting the Position of Popovers
we also can set popovers to appear on top, right, bottom and left sides of an element.Let us see an example

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example of  Bootstrap Popover Placement</title>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap-theme.min.css">
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $(".popover-top").popover({
        placement : 'top'
    });
    $(".popover-right").popover({
        placement : 'right'
    });
   });
</script>
<style type="text/css">
	.bs-example{
    	margin: 100px 20px;
    }
</style>
</head>
<body>
<div class="bs-example"> 
    <ul class="list-inline">
        <li><a href="#" class="btn btn-primary popover-top" data-toggle="popover" title="Popover title" data-content="Default popover">Popover on top</a></li>
        <li><a href="#" class="btn btn-success popover-right" data-toggle="popover" title="Popover title" data-content="Popover on right.">Popover on right</a></li>
            </ul>
</div>
</body>
</html>     

popover-rght

Options
There are certain options which may be passed to popover() Bootstrap method to customize the functionality of the tooltip plug-in. set these options for popover s using the data attributes — just append the option name to data-, like data-animation=””, data-placement=”” etc.

Name Type Default Value Description
animation boolean true Apply a CSS fade transition to the popover.
placement string | function ‘right’ Sets the position of the popover — top | bottom | left | right | auto. When “auto” value is specified, it will dynamically reorient the popover.
title string | function Sets the default title value if title attribute isn’t present.
trigger string ‘click’ Specify how popover is triggered — click | hover | focus | manual.

Methods
There are four standard bootstrap’s popover methods. These methods are used to give popover a few options to work with. Let us see what these methods can do. Afterwards we will see these methods in action.
$().popover(options)
This method attaches the popover handler to a group of elements.
.popover(‘show’)
This method reveals an element’s popover.
.popover(‘hide’)
This method hides an element’s popover.
.popover(‘toggle’)
This method toggles an element’s popover.
.popover(‘destroy’)
This method hides and destroys an element’s popover.
Let us look through a set of codes which represents the above methods.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example of Bootstrap  Popover Methods</title>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap-theme.min.css">
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $(".show-popover").click(function(){
   		$(".popover-examples a").popover('show');
    });
    $(".hide-popover").click(function(){
   		$(".popover-examples a").popover('hide');
    });
    $(".toggle-popover").click(function(){
   		$(".popover-examples a").popover('toggle');
    });
    $(".destroy-popover").click(function(){
   		$(".popover-examples a").popover('destroy');
    });
});
</script>
<style type="text/css">
	.bs-example{
    	margin: 100px 50px;
    }
	.popover-examples{
		margin-bottom: 60px;
	}
</style>
</head>
<body>
<div class="bs-example">
    <p class="popover-examples">
        <a href="#" title="Popover title" class="btn btn-lg btn-primary" data-toggle="popover" data-content="And here's some amazing content. It's very engaging.">Popover Example</a>
    </p>
    <div class="popover-controls">
        <p>Click on the following buttons to control the popover manually.</p>
    	<input type="button" class="btn btn-info show-popover" value="Show">
        <input type="button" class="btn btn-warning hide-popover" value="Hide">
        <input type="button" class="btn btn-success toggle-popover" value="Toogle">
        <input type="button" class="btn btn-danger destroy-popover" value="Destroy">
    </div>    
</div>
</body>
</html>     

popover-methods

If you find this article helpful, you can connect us in Google+ and Twitter.

Enter your email address: Delivered by FeedBurner

Leave a Reply

Your email address will not be published. Required fields are marked *