Press "Enter" to skip to content

Bootstrap Popover Extended with Modal Properties Using jQuery Plugin

Bootstrap Popover Extended – Popup with modal behavior, multiple placements, automatic placements, ability to dynamically load content, and more other design improvements. The plugin uses an enhanced style specific to Bootstrap 5.x, 4.x or 3.x versions, and includes various additional styling options. Originally inspired by BootstrapModalPopover for Bootstrap 2.x, this plugin is highly optimized for Bootstrap 3.x and includes many new features.

Note: See the changelog for details of the changes made to the different versions. From version 1.4.8, all bootstrap libraries from bootstrap 3.x to bootstrap 4.x and 5.x are supported.

bootstrap popover example div content, bootstrap popover html content example, bootstrap tooltip vs popover, bootstrap popover like modal, bootstrap popover not working in modal

Features:

The plugin offers these enhanced features:

  • The extended popup can be displayed just like a modal dialog for bootstrap popover style.
  • Since the plugin extends the bootstrap model, all bootstrap modal features and methods are also available.
  • Adds a popup footer with the header. Configuring the HTML content of the popup template is much easier, just like the boot modal.
  • Special designs and spaces for boot buttons are added in the popup footer.
  • Add a close icon/button to a popup.
  • Configure different pre-created styles/templates. In addition to the default color (gray), 3 introductory contextual color patterns can be used from Basic, Success, Danger, and Warning.
  • Controls popup positions in relation 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
  • Special style for popup arrow to be consistent for each contextual color and popup position.
  • Pre-made CSS styles to control the appearance and sizes of popups
  • Ability to configure and adjust popups via JavaScript using the PopoverButton plugin.
  • Auto placement function that allows the popup to be positioned automatically based on the scroll dimensions and device screen. Several auto placement options are available such as auto, auto top, auto right, auto bottom, auto left, landscape, and portrait.
  • Allow scrolling in page with popover rendering (unlike bootstrap modal).
    Design improvements for popover do not overlap but remain behind the boot navigation bar.

How to make use of it:

1. To use this plugin, makes positive you will have a jQuery library and Bootstrap framework installed in your web undertaking.

<link href="/path/to/bootstrap.min.css" rel="stylesheet">
<script src="/path/to/jquery.min.js"></script>
<script src="/path/to/bootstrap.min.js"></script>

2. Include the Bootstrap Popover X plugin’s JavaScript and files within the web page.

<link href="bootstrap-popover-x.css" rel="stylesheet">
<script src="bootstrap-popover-x.js"></script>

3. Create the Bootstrap Popover X content as comply with:

<div id="myPopover" class="popover popover-default">
  <div class="arrow"></div>
  <h3 class="popover-title">
    <span class="close pull-right" data-dismiss="popover-x">&times;</span>
    Title here
  </h3>
  <div class="popover-content">
    Popover content goes here
  </div>
  <div class="popover-footer">
    Footer here
  </div>
</div>

4. Create a trigger button to toggle the popover.

<button data-toggle="popover-x" 
        data-target="#myPopover">
        Click me
</button>

5. Override the default styles of the popover.

<div id="myPopover" class="popover popover-danger">
  ...
</div>

6. Specify the place to place the popover utilizing data-placement attribute.

<button data-toggle="popover-x" 
        data-target="#myPopover"
        data-placement="top">
        Click me
</button>

7. By default the popover will likely be opened by click on on the set off button.

<button data-toggle="popover-x" 
        data-target="#myPopover"
        data-trigger="hover focus">
        Click me
</button>

Placement

string, the positioning of the popover with respect to the initialized element/button. Defaults to auto. The plugin supports these different placement options:

SettingDescription
Normal Placement Settings
rightPopover dialog is displayed to the right of the button element with the arrow pointing left at the right center of the button.
leftPopover dialog is displayed to the left of the button element with the arrow pointing right at the left center of the button.
topPopover dialog is displayed to the top of the button element with the arrow pointing down at the top center of the button.
bottomPopover dialog is displayed to the bottom of the button element with the arrow pointing up at the bottom center of the button.
top top-leftPopover 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-rightPopover 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-leftPopover 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-rightPopover 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-topPopover 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-bottomPopover 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-topPopover 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-bottomPopover 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

autoAutomatic 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-topA 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-rightA 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-bottomA 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-leftA 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.
horizontalA variation of auto placement where the plugin only orients horizontally to the left or right but does not vertically.
verticalA variation of auto placement where the plugin only orients vertically to the top or bottom but does not horizontally.

jQuery Based Bootstrap Popover Enhancement Plugin, bootstrap-popover-x Github, modal popover bootstrap 4, jquery popover, bootstrap popover template


See Demo And Download

Official Website(kartik-v): Click Here

This superior jQuery/javascript plugin is developed by kartik-v. For extra Advanced Usages, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published.