Bootstrap use the PopOver plug-in to implement the mouse display and keep the display box _javascript tips

In the mall, the navigation bar shopping cart display often need a mouse, display has been put into the shopping cart merchandise, Bootstrap is not directly used plug-ins, this time you can use popover this plug-in transformation after implementation, specific as follows:

To implement the effect diagram:

HTML implementation:

<a href= "#" rel= "Drevil" >
<span class= "Glyphicon glyphicon-shopping-cart" > </span> shopping Cart
</a>

JavaScript implementation:

$ (function () {$ (' [Rel=drevil] '). PopOver ({trigger: ' manual ', placement: ' Bottom ',//placement of the popover. Also can us e 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 ' ></div>",//this is The content of the HTML box.
Add the image here or anything your 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). P
Opover ("Hide")}, 100);
}); });

The above is a small series to introduce the bootstrap use PopOver plug-ins to achieve the mouse through the display and keep the display box, I hope to help you, if you have any questions please give me a message, small series will promptly reply to everyone. Here also thank you very much for the cloud Habitat Community website support!