Bootstrap popover extended with modal properties and more.
OTHER License
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.
The plugin offers these enhanced features:
primary
,info
, success
, danger
, and warning
can be used.auto
, auto-top
, auto-right
, auto-bottom
, auto-left
, horizontal
, and vertical
.View the plugin documentation and plugin demos at Krajee JQuery plugins.
modal.js
)You can use the bower
package manager to install. Run:
bower install bootstrap-popover-x
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
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.
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/[email protected]/dist/css/bootstrap.min.css">
<link href="https://cdn.jsdelivr.net/gh/kartik-v/[email protected]/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/[email protected]/dist/js/bootstrap.bundle.min.js" type="text/javascript"></script>
<script src="https://cdn.jsdelivr.net/gh/kartik-v/[email protected]/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
.
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>
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>
View the plugin documentation and plugin demos at Krajee JQuery plugins.
This project exists thanks to all the people who contribute. [Contribute].
Become a financial contributor and help us sustain our community. [Contribute]
Support this project with your organization. Your logo will show up here with a link to your website. [Contribute]
bootstrap-popover-x is released under the BSD-3-Clause License. See the bundled LICENSE.md
for details.