Introduction
In this article I will explain creation of a Popover in PHP using Twitter Bootstrap file. The Twitter Bootstrap file full package is supported for creating a navbar, dropdown, Scrollspy, and popover. For creating a popover you will require the Twitter Bootstrap package. You can download this package using this link: http://twitter.github.com/.
Creating popover using Simple jQuery functions and HTML5.
| Code |
Explanation |
| <script src="https://ajax.googleapis.com/ajax/libs/ jquery/1.7.1/jquery.min.js"></script> |
Include jQuery file. |
| <script src="/twitter-bootstrap/twitter-bootstrap-v2/ js/bootstrap-tooltip.js"></script> |
Include Twitter Bootstrap Tooltip file.
|
| <script src="/twitter-bootstrap/twitter-bootstrap-v2/js/ bootstrap-popover.js"></script> |
Include Twitter BootstrapPopover file.
|
| $(function () |
To prepare the document. jQuery command. |
| $("#popup").popover(); |
id popup is accessed and popover() is |
Example1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Twitter Bootstrap Popovere</title>
<meta name="description" content="Creating Modal Window with Twitter Bootstrap">
<link href="/twitter-bootstrap/twitter-bootstrap-v2/docs/assets/css/bootstrap.css" rel="stylesheet">
</head>
<body>
<div class="container">
<h2>Creating Popover with Twitter Bootstrap</h2>
<div class="well">
<a href="#" id="popup" class="btn btn-danger" rel="popover" data-content="It's so simple and very usefull any website!" data-original-title="Twitter Bootstrap Popover">hover for popover</a>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="/twitter-bootstrap/twitter-bootstrap-v2/js/bootstrap-tooltip.js"></script>
<script src="/twitter-bootstrap/twitter-bootstrap-v2/js/bootstrap-popover.js"></script>
<script>
$(function () {
$("#popup").popover();
});
</script>
</body>
</html>
Output
![popover1.jpg]()
Type of the
replacement of the position could also be string or perform, default replacement is 'right',
top, bottom and left square measure different values which can be used. It's
accustomed the verify the position of the text placement the anchor text.
Example2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Twitter Bootstrap Popover with placement option Example</title>
<meta name="description" content="Creating Modal Window with Twitter Bootstrap">
<link href="/twitter-bootstrap/twitter-bootstrap-v2/docs/assets/css/bootstrap.css" rel="stylesheet">
<style>
a {
margin-left : 400px;
}
</style>
</head>
<body>
<div class="container">
<h2>Creating Popover with placement option</h2>
<div class="well">
<a href="#" id="popup" class="btn btn-success" rel="popover" data-content="It's so simple and very usefull any website!" data-original-title="Twitter Bootstrap Popover">hover for popover</a>
</div>
<div class="well">
<a href="#" id="popup_left" class="btn btn-success" rel="popover" data-content="It's so simple and very usefull any website!" data-original-title="Twitter Bootstrap Popover">hover for popover</a>
</div>
<div class="well">
<a href="#" id="popup_top" class="btn btn-success" rel="popover" data-content="It's so simple and very usefull any website!" data-original-title="Twitter Bootstrap Popover">hover for popover</a>
</div>
<div class="well">
<a href="#" id="popup_bottom" class="btn btn-success" rel="popover" data-content="It's so simple and very usefull any website!" data-original-title="Twitter Bootstrap Popover">hover for popover</a>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="/twitter-bootstrap/twitter-bootstrap-v2/js/bootstrap-tooltip.js"></script>
<script src="/twitter-bootstrap/twitter-bootstrap-v2/js/bootstrap-popover.js"></script>
<script>
$(function () {
$("#popup").popover();
$("#popup_left").popover({ placement: 'left' });
$("#popup_top").popover({ placement: 'top' });
$("#popup_bottom").popover({ placement: 'bottom' });
});
</script>
</body>
</html>
Output
Placement for right side.
![popover2.jpg]()
Placement for left side.
![popover3.jpg]()
Placement for up side.
![popover4.jpg]()
Placement for down side.
![popover5.jpg]()