Bootstrap Popover


Bootstrap Popover is something like toltips but contains more information than the toltips. It Display information when user clicks on it or hovers on it. The four positions of popover plugin are available top, bottom, left , Right. Positions are defined in data attribute data-placement=”top”, data-placement=”bottom”,data-placement=”left” and data-placement=”right” .


Note : Bootstrap Popover plugin requires the javascript read and you have to add the following javascript code in head..

Bootstrap Popover Syntax

<script>
$(document).ready(function(){
    $('[data-toggle="popover-plugin"]').popover(); 
});
</script>

We are going to explain with very basic example and demo-

Bootstrap Popover : Basic Example


 <a href="#" title="Popover Plugin Demo" data-toggle="popover-plugin" data-placement="top" data-content="Demo Content">Click</a>

Try it »

Popovers can also be triggered using javascript as in example below:

<script>
 $('#id').popover(options);
</script>
Bootstrap Popover

popover plugin example

Bootstrap Popover : Positions Example


 <a href="#" title="Popover Plugin Demo" data-toggle="popover-plugin" data-placement="top" data-content="Demo Content">Top</a>
 <a href="#" title="Popover Plugin Demo" data-toggle="popover-plugin" data-placement="left" data-content="Demo Content">Lett</a>
 <a href="#" title="Popover Plugin Demo" data-toggle="popover-plugin" data-placement="right" data-content="Demo Content">Right</a>
<a href="#" title="Popover Plugin Demo" data-toggle="popover-plugin" data-placement="bottom" data-content="Demo Content">Bottom</a>

Try it »

Full Code :

<html>
<head>
<title>Bootstrap Grid</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<script>
$(document).ready(function(){
    $('[data-toggle="popover-plugin"]').popover(); 
});
</script>
</head>
<body>
<div class="container" style="padding-top:150px;padding-left:250px;">

 <a href="#" title="Popover Plugin Demo" data-toggle="popover-plugin" data-placement="top" data-content="Demo Content">Top</a><br>
 <a href="#" title="Popover Plugin Demo" data-toggle="popover-plugin" data-placement="left" data-content="Demo Content">Lett</a><br>
 <a href="#" title="Popover Plugin Demo" data-toggle="popover-plugin" data-placement="right" data-content="Demo Content">Right</a><br>
<a href="#" title="Popover Plugin Demo" data-toggle="popover-plugin" data-placement="bottom" data-content="Demo Content">Bottom</a>
</div>
</body>
</html>
                                                        

Advertisements

Add Comment

📖 Read More