The Bootstrap pop-up plug-in provides an extended view. The pop-up plug-in generates content and tags according to requirements. By default, pop-ups are placed behind their trigger elements.
A popover is similar to a tooltip, providing an extended view. To activate the pop-up box, the user just needs to hover over the element. The contents of the pop-up box can be fully populated using the Bootstrap Data API (Bootstrap Data API). This method relies on tooltips.
If you want to reference the functionality of the plugin separately, then you need to reference popover.js, which relies on the Tooltip plugin. Or, as mentioned in the Bootstrap plugin overview chapter, you can refer to bootstrap.js or compressed versions of bootstrap.min.js.
1. Usage
The popover plugin generates content and tags based on needs. By default, popovers are placed behind their trigger elements. You can add popovers in two ways:
Pass the data property: To add a popover, just add data-toggle="popover" to an anchor/button label. The title of the anchor is the text of the popover. By default, the plugin sets the popover at the top.
<a href="#" data-toggle="popover"> Please hover over my</a>
Through JavaScript: Enable popover via JavaScript:
$('#identifier').popover(options)
The popover plugin is not like the drop-down menus and other plug-ins discussed earlier, it is not a pure CSS plug-in. To use the plugin, you must activate it using jquery (read javascript). Use the following script to enable all popovers in the page:
$(function () { $("[data-toggle='popover']").popover(); });
2. Examples
A pop-up box is to click an element to pop up a container containing the title and content.
//Basic usage <button type="button" data-toggle="popover" data-content="This is a popup box plugin"> Click to pop up/hide popup box</button>//JavaScript initialize $('button').popover();The pop-up plug-in has many properties to configure the display of prompts, as follows:
$('button').popover({ container : 'body', viewport : { selector : '#view', padding : 10, }});There are four methods to execute through JavaScript.
//Show $('button').popover('show');//Hide $('button').popover('hide');//Invert Show and hide $('button').popover('toggle');//Hide and destroy $('button').popover('destroy');There are four types of events in the Popover plugin:
//Events, other similar to $('button').on('show.bs.tab', function() { alert('Free when calling the show method!');});The above is all about this article. I hope it will be helpful for everyone to learn the Bootstrap pop-up plugin.