1.引入popper.js
2.编写js
3.编写html
引入popper.js
1
2<script src={{ url_for('static', filename='js/popper.js') }}></script>
编写js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25<script>
$(function(){
$("[rel=showPic]").popover({
trigger:'manual',
placement : 'right', //placement of the popover. also can use top, bottom, left or right
title : '<div style="text-align:center; color:red; text-decoration:underline; font-size:14px;"> Muah ha ha</div>', //this is the top title bar of the popover. add some basic css
html: true, //needed to show html of course
content : '<div id="popOverBox"><img src="http://www.hd-report.com/wp-content/uploads/2008/08/mr-evil.jpg" width="251" height="201" /></div>', //this is the content of the html box. add the image here or anything you want really.
animation: false
}).on("mouseenter", function () {
var _this = this;
$(this).popover("show");
$(this).siblings(".popover").on("mouseleave", function () {
$(_this).popover('hide');
});
}).on("mouseleave", function () {
var _this = this;
setTimeout(function () {
if (!$(".popover:hover").length) {
$(_this).popover("hide")
}
}, 100);
});
});
</script>编写html
1
2
3<a href="#" rel="showPic">
<span class="glyphicon glyphicon-shopping-cart"> </span> 购物车
</a>
其中rel=”showPic”很重要。
好记性不如烂笔头。