kartik-v / bootstrap-popover-x
Bootstrap Popover Extended - Popover with modal behavior, styling enhancements and more.
Fund package maintenance!
Open Collective
Installs: 2 728 097
Dependents: 3
Suggesters: 0
Security: 0
Stars: 115
Watchers: 18
Forks: 50
Open Issues: 2
Language:HTML
README
bootstrap-popover-x
Bootstrap Popover Extended - Popover with modal behavior, multiple placements, automatic placements, ability to load content dynamically, and more other styling enhancements. The plugin uses enhanced styling specific for Bootstrap versions 5.x, 4.x or 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 and includes various new features.
NOTE: Refer the CHANGE LOG for details of changes to various releases. From release v1.4.8, all bootstrap libraries till bootstrap 5.x (including bootstrap 4.x and 3.x) is supported.
Features
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.
- 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.
- Add a close icon/button to a popover window.
- Configure various prebuilt styles/templates. In addition to a default (grey), the bootstrap 3 contextual color styles of
primary
,info
,success
,danger
, andwarning
can be used. - Control popover placements with respect to the target element. The plugin supports 12 different placement options:
- right
- left
- top
- bottom
- top top-left
- top top-right
- bottom bottom-left
- bottom bottom-right
- left left-top
- left left-bottom
- right right-top
- right right-bottom
- auto
- auto-top
- auto-right
- auto-bottom
- auto-left
- horizontal
- vertical
- Specially style the popover arrow to be consistent for each contextual color and popover placement.
- 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
, andvertical
. - Allow scrolling of the page with popover displayed (unlike bootstrap modal).
- Styling enhancements for popover to not overlay but stay behind the bootstrap navbar.
Demo
View the plugin documentation and plugin demos at Krajee JQuery plugins.
Pre-requisites
- Bootstrap 5.x or 4.x or 3.x (Requires bootstrap
modal.js
) - Latest JQuery
- Most browsers supporting CSS3 & JQuery.
Installation
Using Bower
You can use the bower
package manager to install. Run:
bower install bootstrap-popover-x
Using Composer
You can use the composer
package manager to install. Either run:
$ php composer.phar require kartik-v/bootstrap-popover-x "dev-master"
or add:
"kartik-v/bootstrap-popover-x": "dev-master"
to your composer.json file
Manual Install
You can also manually install the plugin easily to your project. Just download the source ZIP or TAR ball and extract the plugin assets (css and js folders) into your project.
Usage
Load Client Assets
You must first load the following assets in your header.
<!-- bootstrap 5.x, 4.x or 3.x is supported --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css"> <link href="https://cdn.jsdelivr.net/gh/kartik-v/bootstrap-popover-x@1.5.4/css/bootstrap-popover-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 for modal dialog dependency. --> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.bundle.min.js" type="text/javascript"></script> <script src="https://cdn.jsdelivr.net/gh/kartik-v/bootstrap-popover-x@1.5.4/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
for
the plugin to work with default settings.
Note: The plugin extends the bootstrap modal plugin and hence the
bootstrap.min.js
must be loaded beforebootstrap-popover-x.min.js
.
Option 1: Via data attributes
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-x is-bs4 popover-default"> <!-- the is-bs4 class is needed for bootstrap 4 styling --> <div class="arrow"></div> <h3 class="popover-header popover-title"><span class="close" data-dismiss="popover-x">×</span>Title</h3> <div class="popover-body popover-content"> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p> </div> </div>
Option 2: Via javascript
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).on('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>
Documentation and Demo
View the plugin documentation and plugin demos at Krajee JQuery plugins.
Contributors
Code Contributors
This project exists thanks to all the people who contribute. [Contribute].
Financial Contributors
Become a financial contributor and help us sustain our community. [Contribute]
Individuals
Organizations
Support this project with your organization. Your logo will show up here with a link to your website. [Contribute]
License
bootstrap-popover-x is released under the BSD-3-Clause License. See the bundled LICENSE.md
for details.