Bootstrap Popover Extended - Popover with modal behavior, multiple placements, automatic placements, ability to load content dynamically, and more other styling enhancements. The plugin enhances the styles for Bootstrap 3.x, and incorporates various additional styling options. This plugin was originally inspired by BootstrapModalPopover for Bootstrap 2.x, and has been significantly enhanced for Bootstrap 3.x, 4.x and 5.x and includes various new features. View a complete demo.
Not seeing the updated content on this page! Hard refresh your browser to clean cache for this page (e.g. SHIFT-F5 on Windows Chrome)
The plugin offers these enhanced features:
The extended popover can be rendered just like a bootstrap modal dialog with the bootstrap popover styling. Since the plugin extends the bootstrap modal, all features of the bootstrap modal and its methods are also available.
Supports various placement options for the popover dialog with respect to the target element including the arrow indicator.
Adds a popover footer along with header. Configuration of the HTML content for the popover is much easier, just like a bootstrap modal.
Specially styles and spaces out bootstrap buttons added in popover footer.
Configure various prebuilt styles/templates. In addition to a default (grey), the bootstrap 3 contextual color styles of primary,
info, success, danger, and warning can be used.
Prebuilt CSS styles for controlling appearance and sizes of the popovers
Ability to initialize and set popovers via javascript using the PopoverButton plugin.
Auto placement functionality that allows the popover to be placed automatically based on scroll and device screen dimensions. Various automatic placement options are available like auto, auto-top, auto-right, auto-bottom, auto-left, horizontal, and vertical.
Allow scrolling of the page with popover displayed (unlike bootstrap modal).
Styling enhancements for popover to not overlay but stay behind the bootstrap navbar.
Latest JQuery
Bootstrap Modal Plugin (supports both bootstrap 3.x and bootstrap 4.x).
Most modern browsers supporting CSS3, HTML5 inputs, & JQuery. For Internet Explorer, one must use IE versions 9 and above to render the rating.
Bootstrap CSS (supports both bootstrap 3.x and bootstrap 4.x).
The bootstrap-popover-x plugin can be installed automatically or manually using one of these options:
Installation via bower package manager is as simple as running:
$ bower install bootstrap-popover-x
Installation via NPM is as simple as running:
$ npm install bootstrap-popover-x
You must first load the following assets in your header.
<!-- Bootstrap 5.x, 4.x. and 3.x is supported. -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css">
<link href="path/to/css/checkbox-x.min.css" media="all" rel="stylesheet" type="text/css" />
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<!-- bootstrap.min.js below is needed if you wish to zoom and preview file content in a detail modal
dialog. Bootstrap 5.x, 4.x. and 3.x is supported. -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.min.js" type="text/javascript"></script>
<script src="path/to/js/bootstrap-popover-x.min.js" type="text/javascript"></script>
If you noticed, you need to load the bootstrap.min.css, jquery.min.js, and bootstrap.min.js in addition to the
bootstrap-popover-x.min.css and bootstrap-popover-x.min.js.
bootstrap.min.js must be loaded before popover-x.min.js.
After loading the assets, setup your input markup for the extended popover plugin. You can activate the extended popover without writing JavaScript.
Set data-toggle="popover-x" on a controller element, like a button, along with a data-target="#foo" or href="#foo"
to target a specific popover to toggle.
<button class="btn btn-primary btn-lg" data-toggle="popover-x" data-target="#myPopover1" data-placement="top">Top</button>
<div id="myPopover1" class="popover popover-default">
<div class="arrow"></div>
<div class="popover-title"><span class="close pull-right" data-dismiss="popover-x">×</span>Title</div>
<div class="popover-content">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
</div>
</div>
Alternatively, you can initialize the popover manually on your page via javascript using the PopoverButton plugin. This feature is typically useful when dynamically rendering content and dynamically enabling an element to trigger the popover.
<-- for example with the following button markup and using the same popover content markup above -->
<button id="#btn1" class="btn btn-primary btn-lg">Top</button>
<script>
$(document).ready(function() {
// initialize popover on click of `#btn1`
$('#btn1').popoverButton({
target: '#myPopover1'
});
// or alternatively initialize popover on hover of `#btn1`
$('#btn1').popoverButton({
target: '#myPopover1',
trigger: 'hover focus'
});
});
</script>
View a complete demo.
The plugin options are separated into PopoverX plugin options and PopoverButton plugin options.
The PopoverX plugin sets up the core popover extended dialog. It works just like the bootstrap modal and can be initialized via data attributes on the toggle button element that triggers it (or directly via javascript on the dialog element). When initializing via javascript dynamically it is recommended to use the PopoverButton plugin, as described in the next section.
The plugin can be setup via HTML5 data attributes or initialized via jQuery plugin as $('#popover-dialog-id').popoverX({plugin_options}). The PopoverX plugin supports all options that are supported by the bootstrap modal. The following options are supported by the PopoverX plugin:
boolean, when set to true, it closes all other popovers on the page when the current popover is shown. Defaults to true.
boolean, when set to true, it hides the popover after the popover has lost focus (e.g. when clicking outside the popover). Defaults to true.
boolean, when set to true, the plugin will automatically reposition the popver dialog for smaller screen width devices. Defaults to true.
integer, the screen width in pixels below which the autoPlaceSmallScreen rule will be applied. Defaults to 640.
string, the positioning of the popover with respect to the initialized element/button. Defaults to auto. The plugin supports these different placement options:
| Setting | Description |
|---|---|
| Normal Placement Settings | |
right |
Popover dialog is displayed to the right of the button element with the arrow pointing left at the right center of the button. |
left |
Popover dialog is displayed to the left of the button element with the arrow pointing right at the left center of the button. |
top |
Popover dialog is displayed to the top of the button element with the arrow pointing down at the top center of the button. |
bottom |
Popover dialog is displayed to the bottom of the button element with the arrow pointing up at the bottom center of the button. |
top top-left |
Popover dialog is displayed to the top of the button element with the arrow pointing down at the top left corner of the button. |
top top-right |
Popover dialog is displayed to the top of the button element with the arrow pointing down at the top right corner of the button. |
bottom bottom-left |
Popover dialog is displayed to the top of the button element with the arrow pointing down at the top left corner of the button. |
bottom bottom-right |
Popover dialog is displayed to the bottom of the button element with the arrow pointing down at the bottom right corner of the button. |
left left-top |
Popover dialog is displayed to the left of the button element with the arrow pointing right at the left top corner of the button. |
left left-bottom |
Popover dialog is displayed to the left of the button element with the arrow pointing right at the left bottom corner of the button. |
right right-top |
Popover dialog is displayed to the right of the button element with the arrow pointing right at the right top corner of the button. |
right right-bottom |
Popover dialog is displayed to the right of the button element with the arrow pointing right at the right bottom corner of the button. |
| Auto Placement Settings | |
auto |
Automatic alignment of the popover dialog based on the position of the button element on the page. The plugin auto detects this based on the scrolled position of the page and the displayed screen size (width and height). It will use any one of the normal placements listed above based on the position of the button element on the screen. |
auto-top |
A variation of auto placement where the plugin starts with a normal top orientation, but orients the arrow at the top right or top left based on the position of button element on the screen. |
auto-right |
A variation of auto placement where the plugin starts with a normal right orientation, but orients the arrow at the right top or right bottom based on the position of button element on the screen. |
auto-bottom |
A variation of auto placement where the plugin starts with a normal bottom orientation, but orients the arrow at the bottom right or bottom left based on the position of button element on the screen. |
auto-left |
A variation of auto placement where the plugin starts with a normal left orientation, but orients the arrow at the left top or left bottom based on the position of button element on the screen. |
horizontal |
A variation of auto placement where the plugin only orients horizontally to the left or right but does not vertically. |
vertical |
A variation of auto placement where the plugin only orients vertically to the top or bottom but does not horizontally. |
string url path for remote load, this option is deprecated since bootstrap v3.3.0 as described here.
The PopoverButton plugin allows configuration of the toggle button that triggers the popoverX dialog.
This plugin complements the features in PopoverX plugin and allows dynamic rendering
and initialization of both the toggle button and popover content. Thus, one can use javascript to initialize the PopoverX dialog
via the PopoverButton plugin. Check the advanced usage demo to
understand how to initialize the popover button plugin.
The plugin can be setup via HTML5 data attributes or initialized via jQuery plugin as
$('#button-id').popoverButton({plugin_options}). The following options are important
and specific to the PopoverButton plugin:
string, the identifier for the targer popover dialog element. Usually you would set it to the id attribute of the popover dialog container.
string, this controls how (on which events) the popover is triggered from the toggle button. Defaults to click keyup. The following triggers are supported:
click: popover is shown or hidden on click of the toggle button element.
keyup: popover is shown or hidden when the toggle button is focused and ENTER or RETURN key is pressed on the keyboard.
hover: popover is shown when the toggle button is hovered on (by mouse/pointing device) and hidden when the mouse/pointing device leaves the toggle button.
focus: similar to hover, the popover is shown on focus-in of the toggle button element and hidden on focus-out of the toggle button element. This will be used as the default trigger if one tries to set any other event that is not there in this list.
manual: the popover will not be triggered at all and one need to write their own custom action to trigger the popover.
You may pass multiple triggers by separating them with a space. The manual trigger cannot be combined with any other trigger.
boolean, bootstrap modal property, when set to true, it closes the popover when escape key is pressed. Defaults to true.
The following events are triggered on the popover dialog element.
This event is fired when the popover target button is clicked to open the popover dialog.
This event is fired when the popover has loaded content using the remote option (uses jQuery load/ajax to fetch and load content from a remote URL). Note that the remote property has been deprecated since Bootstrap v3.3.0 and this may not be available in future releases.
Event inherited from Bootstrap Modal. This event fires immediately when the show instance method is called. If caused by a click,
the clicked element is available as the relatedTarget property of the event.
Event inherited from Bootstrap Modal. This event is fired when the popover has been made visible to the user (will wait for CSS transitions to complete).
If caused by a click, the clicked element is available as the relatedTarget property of the event.
The following events are triggered on the popover toggle button element that triggers the popover dialog.
This event is fired when the button is clicked to open the popover dialog and click is set as an event within the trigger property.
This event is fired when the toggle button is hovered in and hover is set as an event within the trigger property.
This event is fired when the toggle button is hovered out (mouse leaves the element) and hover is set as an event within the trigger property.
This event is fired when the toggle button is focused in and focus is set as an event within the trigger property.
This event is fired when the toggle button is focused out (leaves focus) and focus is set as an event within the trigger property.
The PopoverX plugin supports the following methods. These methods must be called on the popover dialog container element.
Manually toggles a popover. Returns to the caller before the popover has actually been shown or hidden (i.e. before the `shown.bs.modal` or `hidden.bs.modal` event occurs).
$('#myPopover1').popoverX('toggle');
Refresh the position of the popover via javascript based on the popover dimensions and placement.
$('#myPopover1').popoverX('refreshPosition');
Manually opens a popover. Returns to the caller before the modal has actually been shown (i.e. before the shown.bs.modal event occurs).
$('#myPopover1').popoverX('show');
The plugin has been implemented as extensions in the following frameworks
| Sl. | Framework | Extension Source | Developed By | Extension Demo |
|---|---|---|---|---|
| 1. | Yii Framework 2.0 | Yii2 Popover X | Krajee | Yii2 Popover X |
Do you know any other framework extension using this plugin which is not listed here? Tell us so that we can consider its inclusion in this list.
bootstrap-popover-x is released under the BSD 3-Clause License. See the bundled LICENSE.md for details.
Comments & Discussion
Note
You can now visit the Krajee Webtips Q & A forum for searching OR asking questions OR helping programmers with answers on these extensions and plugins. For asking a question click here. Select the appropriate question category (i.e. Krajee Plugins) and choose this current page plugin in the question related to field.
The comments and discussion section below are intended for generic discussions or feedback for this plugin. Developers may not be able to search or lookup here specific questions or tips on usage for this plugin.