Bubble pop-up Bootstrap-configuration and flexible application of popover

<SCRIPT src = "/assets/Addons/Bootstrap-select/bootstrap-select.min.js"> </SCRIPT>

<SCRIPT type = "text/JavaScript">
// Bubble pop-up
$ (Function (){
$ (". Popover-Hover"). popover ({
Placement: 'left ',
Trigger: 'hover ',
Title: 'subscription content delay display ',
});
});
</SCRIPT>

 

 

Bootstrap-popover configuration and flexible application

First, list the configuration parameters:

1. Whether the animation is set to true or false.

2. Position of the prompt displayed in placement 'right'/'left'/top/bottom/function () {return 'right '}

3. Target selector object

4. Trigger 'hover '/'click'... trigger Method

5. If the data-original-title attribute is not specified for the Title element, use this default value.

6. If the content element does not specify the data-content attribute, use this default value.

7. Delay display and hide time 20/{Show: 200, hide: 300}

 

Next, let's list the problems we encounter during daily development:

1. What should I do if I want to trigger an event with a mouse click by default?

$(‘a‘).popover({    trigger : ‘click‘});

 

2. What if I want to click a non-target object to close the prompt layer?

Note: Each prompt generates a div container whose class is popover. Therefore, you only need to bind a click event to the body to destroy the DIV whose class is pover. It is worth noting that the bubble of the Click Event of the target object should be canceled.

(function(){    $body.find(‘.popovers‘).each(function(){        $(this).click(function(e){            $(‘.popover‘).remove();            e.preventDefault();            return false;        });        $(this).popover({            trigger : ‘click‘        });    });    $body.click(function(){        $(‘.popover‘).remove();    });})();