In the mall, the shopping cart display in the navigation bar often requires the mouse to pass by, and the products that have been placed in the shopping cart are displayed. Bootstrap does not have a plug-in directly. At this time, you can use the popover plug-in to transform it. The details are as follows:
Implementation renderings:
html implementation:
<a href="#" rel="drevil"><span> </span> Shopping Cart</a>
JavaScript implementation:
$(function(){$("[rel=drevil]").popover({trigger:'manual',placement : 'bottom', //placement of the popover. also can use top, bottom, left or righttitle : '<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 csshtml: 'true', //need to show html of coursecontent : '<div id="popOverBox"><img src="http://www.hd-report.com/wp-content/uploads/2008/08/mr-evil.jpg" /></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);});});The above is what the editor introduced to BootStrap uses popover plug-in to enable the mouse to be displayed and maintained on the display box. I hope it will be helpful to everyone. If you have any questions, please leave me a message and the editor will reply to everyone in time. Thank you very much for your support to Wulin.com website!