The BootStrap pop-up box (Popover) allows you to move the mouse over the pop-up layer. The reason why the pop-up window layer is not hidden and the solution is bootstrappover.

The BootStrap pop-up box (Popover) allows you to move the mouse over the pop-up layer. The reason why the pop-up window layer is not hidden and the solution is bootstrappover.

The pop-up box (Popover) is similar to the Tooltip and provides an extended view. To activate the pop-up box, you only need to hover your mouse over the element. You can use the Bootstrap Data API to fill the content in the pop-up box. This method depends on tooltip ).

1. Set the latency. If the latency is exceeded, the pop-up window is hidden.

Tooltip. prototype. var triggers = this in init = function. options. trigger. add // After split ('') to set the latency if (this. options. trigger. indexOf ('hover ')>-1) {$. extend (true, this. options, {delay :{ hide: 100 }});}

2. Do not disappear the code

In Tooltip. prototype. enter = function (obj) {,

Added after clearTimeout (self. timeout)

If (self. options. trigger. indexOf ('hover ')>-1) {self. $ tip. unbind ('mouseenter '). bind ('mouseenter', function (e) {self. $ tip. data ('data-element', self. $ element); // The idclearTimeout (self. timeout); self. hoverState = 'in ';}). unbind ('mouseleave '). bind ('mouseleave ', function (e) {self. hoverState = 'out'; self. timeout = setTimeout (function () {if (self. hoverState = 'out') self. hide ()}, self. options. delay. hide )})}

Bootstrap version: v3.3.6

The following is an example of Popover usage.

The Popover plug-in generates content and tags as needed. By default, popovers are placed behind their trigger elements. You can add popover in either of the following ways ):

Data attributes: to add a pop-up box (popover), you only need to add data-toggle = "popopover" to an anchor or button label. The title of the anchor is the text in the pop-up box (popover. By default, the plug-in sets the pop-up box (popover) to the top.

<A href = "#" data-toggle = "popover" title = "Example popover"> Please hover over me </a>

Enable popover through JavaScript ):

$ ('# Identifier'). popover (options)

The Popover plug-in is not a pure CSS plug-in, just like the drop-down menu and Other plug-ins discussed earlier. To use this plug-in, you must use jquery to activate it (read javascript ). Use the following script to enable all popovers on the page ):

$(function () { $("[data-toggle='popover']").popover(); });

Articles you may be interested in:

• Bootstrap implements pop-up window and drag effect
• Fully parse the Bootstrap pop-up window implementation method