Bootstrap pop-up box (popover) plugin _javascript tips every day

The Bootstrap pop-up plugin provides an expanded view of the pop-up (PopOver) plug-in to generate content and markup based on requirements, by default, by placing the pop-up box (PopOver) behind their triggering elements.

The pop-up box (PopOver), like a ToolTip (Tooltip), provides an expanded view. If you want to activate the pop-up box, the user simply hover the mouse over the element. The contents of the pop-up box are completely populated with the Bootstrap Data API (BOOTSTRAP). This method relies on ToolTips (tooltip).

If you want to refer to the plug-in's functionality separately, you need to refer to popover.js, which relies on a ToolTip (Tooltip) plug-in. Alternatively, as mentioned in the Bootstrap Plug-in Overview chapter, you can refer to the Bootstrap.js or compressed version of Bootstrap.min.js.

One, usage

The pop-up box (popover) plug-in generates content and markup based on requirements, and by default, the pop-up box (PopOver) is placed behind their triggering elements. You can add a pop-up box (PopOver) in the following two ways:

With the Data property: To add a pop-up box (popover), simply add data-toggle= "PopOver" to an anchor/button tag. The title of the anchor is the text of 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 my top
</a>

Through JavaScript: Enable pop-up box (PopOver) via javascript:
$ (' #identifier '). PopOver (Options)
the pop-up box (popover) plugin is not a pure CSS plug-in, unlike the Drop-down menus 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 pop-up boxes on the page (popover):
$ (function () {$ (' [data-toggle= ' popover '] '). PopOver ();});

Second, the example

A pop-up box that clicks an element pops up a container that contains the title and content.

Basic usage

<button class= "btn btn-lg btn-danger" type= "button" data-toggle= "PopOver" title= "
 Pop-up box"
 data-content= "This is a pop-up plugin" >
 click eject/Hide popup
</button>

//javascript Initialize

$ (' button '). PopOver ();

The pop-up plugin has many properties to configure the display of hints, as follows:

$ (' button '). PopOver ({
 container: ' Body ',
 viewport: {
 selector: ' #view ',
 padding:10,
 }

There are four ways to execute through JavaScript.

Displays
$ (' button '). PopOver (' show ');
Hide
$ (' button '). PopOver (' hide ');
Reverse Show and Hide
$ (' button '). PopOver (' toggle ');
Hide and Destroy
$ (' button '). PopOver (' destroy ');

There are four types of events in the PopOver plug-in:

event, other identical

$ (' button '). On (' Show.bs.tab ', function () {
 alert (' Trigger when calling the Show method '). ');
}); 

The above is the entire content of this article, I hope to learn bootstrap pop-up box Plug-ins help.