Krajee

Bootstrap Popover X

Thankful to Krajee! BUY A COFFEEor to get more out of us.

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.

Tip

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.

  1. Latest JQuery

  2. Bootstrap Modal Plugin (supports both bootstrap 3.x and bootstrap 4.x).

  3. Most modern browsers supporting CSS3, HTML5 inputs, & JQuery. For Internet Explorer, one must use IE versions 9 and above to render the rating.

  4. 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:

Bower Package Manager


Installation via bower package manager is as simple as running:

$ bower install bootstrap-popover-x

Node Package Manager


Installation via NPM is as simple as running:

$ npm install bootstrap-popover-x

Composer Package Manager


You can install bootstrap-popover-x via composer package manager. 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 asset files and folders into your project.

Load Client Assets

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.

Note

The plugin extends the bootstrap modal plugin and hence the bootstrap.min.js must be loaded before 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-default">
    <div class="arrow"></div>
    <div class="popover-title"><span class="close pull-right" data-dismiss="popover-x">&times;</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>

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).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:

closeOpenPopovers

boolean, when set to true, it closes all other popovers on the page when the current popover is shown. Defaults to true.

closePopoverOnBlur

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.

autoPlaceSmallScreen

boolean, when set to true, the plugin will automatically reposition the popver dialog for smaller screen width devices. Defaults to true.

smallScreenWidth

integer, the screen width in pixels below which the autoPlaceSmallScreen rule will be applied. Defaults to 640.

placement

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.

remote

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:

target

string, the identifier for the targer popover dialog element. Usually you would set it to the id attribute of the popover dialog container.

trigger

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.

keyboard

boolean, bootstrap modal property, when set to true, it closes the popover when escape key is pressed. Defaults to true.

focus

focus, bootstrap modal property, when set to true, it puts the popover in focus when popover dialog is initialized. Defaults to true.

show

boolean, bootstrap modal property, shows the popover when initialized. Defaults to false.

The following events are triggered on the popover dialog element.

click.target.popoverX

This event is fired when the popover target button is clicked to open the popover dialog.

load.complete.popoverX

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.

keyup.target.popoverX

This event is fired when the escape key is pressed to hide the popover.

show.bs.modal

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.

shown.bs.modal

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.

hide.bs.modal

Event inherited from Bootstrap Modal. This event is fired immediately when the hide instance method has been called.

hidden.bs.modal

Event inherited from Bootstrap Modal. This event is fired when the popover has finished being hidden from the user (will wait for CSS transitions to complete).

Example:

    $('#myPopover1').on('hidden.bs.modal', function (e) {
        // do something...
    });

The following events are triggered on the popover toggle button element that triggers the popover dialog.

click.popoverX

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.

mouseenter.popoverX

This event is fired when the toggle button is hovered in and hover is set as an event within the trigger property.

mouseleave.popoverX

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.

focusin.popoverX

This event is fired when the toggle button is focused in and focus is set as an event within the trigger property.

focusout.popoverX

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.

toggle

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');

refreshPosition

Refresh the position of the popover via javascript based on the popover dimensions and placement.

$('#myPopover1').popoverX('refreshPosition');

show

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');

hide

Manually hides a popover. Returns to the caller before the modal has actually been hidden (i.e. before the hidden.bs.modal event occurs).

$('#myPopover1').popoverX('hide');

destroy

Destroys the PopoverX jQuery plugin. NOTE: This method will NOT destroy the PopoverButton jQuery plugin.

$('#myPopover1').popoverX('destroy');

The PopoverButton plugin supports the following methods. These methods must be called on the popover button element.

destroy

Destroys the PopoverButton jQuery plugin. NOTE: This method will also destroy the PopoverX jQuery plugin.

$('#btn1').popoverButton('destroy');

The plugin has been implemented as extensions in the following frameworks

Sl.FrameworkExtension SourceDeveloped ByExtension Demo
1.Yii Framework 2.0Yii2 Popover XKrajee 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.

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.

 
visitors to Krajee Jquery Plugins since 22-May-2017