Bootstrap Popover X

Bootstrap Popover X is a jQuery plugin that turns Bootstrap's popover into a modal-style dialog with header, footer, 19 placement options, and automatic positioning based on screen and scroll. It is developed by Kartik Visweswaran for Krajee and supports Bootstrap 5.x, 4.x, and 3.x.

What is Bootstrap Popover X?

Bootstrap Popover X is an extended popover component that combines the look of a Bootstrap popover with the behavior of a Bootstrap modal. It accepts either HTML markup with data-toggle="popover-x" attributes or JavaScript initialization through the PopoverButton plugin, and outputs a styled popover window containing a header, a close icon, a body, and an optional footer. Because the plugin extends the Bootstrap modal plugin, all modal methods are available, but the page can still scroll while the popover is open. The plugin is maintained by Kartik Visweswaran as part of the Krajee jQuery plugin suite.

Key Features

• Modal-style behavior — Renders like a Bootstrap modal dialog while keeping the popover arrow and styling; inherits the full modal API from bootstrap.modal.js.
• 19 placement options — Supports right, left, top, bottom, corner placements such as top top-left, and auto variants including auto-top, horizontal, and vertical.
• Automatic placement — Repositions the popover automatically based on scroll position and device screen dimensions so it stays visible on small screens.
• Header and footer — Adds a .popover-header with an optional close icon and a .popover-footer with specially spaced Bootstrap buttons.
• Prebuilt themes — Includes a default grey style plus the Bootstrap 3 contextual colors primary, info, success, danger, and warning.
• PopoverButton JS plugin — Lets you initialize popovers on click or hover by setting a target and trigger, useful for dynamically rendered content.
• Bootstrap version support — Works with Bootstrap 5.x, 4.x, and 3.x; both bootstrap-popover-x.min.css and bootstrap-popover-x.min.js must be loaded, with Bootstrap's bundle before the plugin script.

Who is Bootstrap Popover X for?

Bootstrap developers building admin dashboards or internal tools who need popovers that can hold forms, buttons, or rich content without writing a full modal. Front-end engineers who need precise arrow placement or auto-positioning for responsive layouts can set any of the 19 placement values directly in markup. Plugin authors who embed third-party controls can use the PopoverButton JavaScript API to bind popovers to elements created at runtime.

What can you do with Bootstrap Popover X?

• Web app builders: Display confirmation dialogs, quick-form popovers, or detail panels anchored to table rows or buttons, with the page remaining scrollable.
• Front-end developers: Trigger popovers on click, hover, or focus by setting data-toggle="popover-x" and data-target on any controller element.
• Theme designers: Apply contextual color themes to popovers and ensure the arrow matches each placement and color.

How does Bootstrap Popover X work?

Load Bootstrap's CSS and JS (any of 5.x, 4.x, or 3.x), jQuery, then the plugin's CSS and JS files. You can then activate a popover either with markup (data-toggle="popover-x" plus data-target on a button) or with JavaScript by calling the popoverButton method on the trigger element and passing the target id as an option. The plugin automatically handles arrow placement, optional footer, and closing behavior.

FAQ

What Bootstrap versions does Bootstrap Popover X support?

Bootstrap Popover X supports Bootstrap 5.x, 4.x, and 3.x from release v1.4.8 onward. It requires the Bootstrap modal plugin, so bootstrap.min.js or bootstrap.bundle.min.js must be loaded before bootstrap-popover-x.min.js.

How do I install bootstrap-popover-x?

You can install it with Bower using bower install bootstrap-popover-x, with Composer by requiring kartik-v/bootstrap-popover-x in your composer.json, or manually by downloading the source ZIP and extracting the css and js folders.

How do I trigger a popover without writing JavaScript?

Add data-toggle="popover-x" and a data-target="#myPopover" attribute to a button or other controller element. You can also set data-placement to control position, and the popover markup must include a .popover element with the matching id.

Does Bootstrap Popover X work with dynamically added content?

Yes. Use the PopoverButton plugin and call the popoverButton method on the trigger element with the target and trigger options set. This approach lets you bind popovers at runtime.

Is Bootstrap Popover X free?

Yes, the plugin is released under the BSD-3-Clause license, so it is free to use in personal and commercial projects. The source includes a bundled LICENSE.md with the full license text.