Every day, Bootstrap must learn the Popover plug-in _ javascript skills

The Popover plug-in is required for Bootstrap every day. You can use the Bootstrap data API (BootstrapDataAPI) to fill in the content in the pop-up box. for how to implement the plug-in, see the Bootstrap pop-up box plug-in this article, provides an extended view. The pop-up box (Popover) Plug-In generates content and tags as needed. By default, popovers are placed behind their trigger elements.

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 ).

If you want to independently reference the functions of this plug-in, you need to reference popover. js, which depends on the Tooltip plug-in. Alternatively, as mentioned in the Bootstrap plug-in overview chapter, you can reference bootstrap. js or the compressed version of bootstrap. min. js.

I. Usage

Popover plug-inGenerate 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.

Please hover over my

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 = 'pover ']"). popover ();});

Ii. Instances

In the pop-up box, click an element to bring up a container containing the title and content.

// Basic usageClick the pop-up/hide dialog box// JavaScript initialization $ ('click'). popover ();

The plug-in the pop-up box has many attributes to display the configuration prompts, as shown below:

$('button').popover({ container : 'body', viewport : { selector : '#view', padding : 10, }}); 

There are four methods executed through JavaScript.

// Display $ ('button '). popover ('show '); // hide $ ('click '). popover ('hide '); // reverse display and hide $ ('click '). popover ('toggle '); // hide and destroy $ ('click '). popover ('deststroy ');

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

// Event, which is similar to $ ('button '). on ('Show. bs. tab', function () {alert ('triggered when the show method is called! ');});

The above is all the content in this article. I hope it will be helpful for you to learn the Bootstrap pop-up box plug-in.