PHPackages kartik-v/bootstrap-popover-x - PHPackages - PHPackages [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register) 1. [Directory](/) 2. / 3. [Utility & Helpers](/categories/utility) 4. / 5. kartik-v/bootstrap-popover-x ActiveLibrary[Utility & Helpers](/categories/utility) kartik-v/bootstrap-popover-x ============================ Bootstrap Popover Extended - Popover with modal behavior, styling enhancements and more. v1.5.4(2y ago)1143.4M↓16%49[2 issues](https://github.com/kartik-v/bootstrap-popover-x/issues)3BSD-3-Clause Since Oct 5Pushed 2y ago16 watchersCompare [ Source](https://github.com/kartik-v/bootstrap-popover-x)[ Packagist](https://packagist.org/packages/kartik-v/bootstrap-popover-x)[ Docs](https://github.com/kartik-v/bootstrap-popover-x)[ Fund](https://opencollective.com/bootstrap-popover-x)[ RSS](/packages/kartik-v-bootstrap-popover-x/feed)WikiDiscussions master Synced 1mo ago READMEChangelog (10)DependenciesVersions (19)Used By (3) [ ![Krajee Logo](https://camo.githubusercontent.com/4addfbb3869c3fc7d79befea4f06d9cf3655a686fb503df0da1d725859cfdef9/687474703a2f2f6b617274696b2d762e6769746875622e696f2f626f6f7473747261702d66696c65696e7075742d73616d706c65732f73616d706c65732f6b72616a65652d6c6f676f2d622e706e67) ](http://plugins.krajee.com "Krajee Plugins") bootstrap-popover-x --- [![Donate](https://camo.githubusercontent.com/0336bc43d88554a3f2d6c74dddf312bc2c65c2eacca70d83ae40f5567098d00e/68747470733a2f2f6b617274696b2d762e6769746875622e696f2f626f6f7473747261702d66696c65696e7075742d73616d706c65732f73616d706c65732f646f6e6174652e706e67)](https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=DTP3NZQ6G2AYU "Donate via Paypal") [![kartikv](https://camo.githubusercontent.com/0cf29a542375e1a46e84d8bf5805a4e5c0a6ee98b6547ccdc0c55eed49d99c69/68747470733a2f2f63646e2e6275796d6561636f666665652e636f6d2f627574746f6e732f76322f64656661756c742d79656c6c6f772e706e67)](https://www.buymeacoffee.com/kartikv "Buy me a coffee") ========================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================== [](#------------------------bootstrap-popover-x------------------) [![Financial Contributors on Open Collective](https://camo.githubusercontent.com/e1ee2c7e2aa46ac9e800a849503f5532b0ea99c50af761a361454d7dc6389564/68747470733a2f2f6f70656e636f6c6c6563746976652e636f6d2f626f6f7473747261702d706f706f7665722d782f616c6c2f62616467652e7376673f6c6162656c3d66696e616e6369616c2b636f6e7472696275746f7273)](https://opencollective.com/bootstrap-popover-x)[![Bower version](https://camo.githubusercontent.com/180dc82a1e72444fd2ac3c08609a0f132f22ae96efe437cf6549ff6d33db458d/68747470733a2f2f62616467652e667572792e696f2f626f2f626f6f7473747261702d706f706f7665722d782e737667)](http://badge.fury.io/bo/bootstrap-popover-x)[![Latest Stable Version](https://camo.githubusercontent.com/3302431e861013fffcb432a29e92b3fca2635dbbfbef69674d0d5cdb95568702/68747470733a2f2f706f7365722e707567782e6f72672f6b617274696b2d762f626f6f7473747261702d706f706f7665722d782f762f737461626c65)](https://packagist.org/packages/kartik-v/bootstrap-popover-x)[![License](https://camo.githubusercontent.com/014858d1735069a244d47374139770526bf5f9c2da0eabfaf2810ec3afa71cc2/68747470733a2f2f706f7365722e707567782e6f72672f6b617274696b2d762f626f6f7473747261702d706f706f7665722d782f6c6963656e7365)](https://packagist.org/packages/kartik-v/bootstrap-popover-x)[![Packagist Downloads](https://camo.githubusercontent.com/7edabb5bd700d6f2a7bbfdfda6004ba6a030e9a80e849bcf94080eed5ba24dc7/68747470733a2f2f706f7365722e707567782e6f72672f6b617274696b2d762f626f6f7473747261702d706f706f7665722d782f646f776e6c6f616473)](https://packagist.org/packages/kartik-v/bootstrap-popover-x)[![Monthly Downloads](https://camo.githubusercontent.com/cce4cb83c5a50f90b1d56d348507cf3fd5ae3d8d98be180ea2f763bf0b224f4b/68747470733a2f2f706f7365722e707567782e6f72672f6b617274696b2d762f626f6f7473747261702d706f706f7665722d782f642f6d6f6e74686c79)](https://packagist.org/packages/kartik-v/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](http://scruffles.github.io/BootstrapModalPopover/) for Bootstrap 2.x, and has been significantly enhanced for Bootstrap 3.x and includes various new features. > NOTE: Refer the [CHANGE LOG](https://github.com/kartik-v/bootstrap-popover-x/blob/master/CHANGE.md) 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 -------- [](#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](https://getbootstrap.com/docs/4.0/components/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`, and `warning` 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`, 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. Demo ---- [](#demo) View the [plugin documentation](http://plugins.krajee.com/popover-x) and [plugin demos](http://plugins.krajee.com/popover-x/demo) at Krajee JQuery plugins. Pre-requisites -------------- [](#pre-requisites) 1. [Bootstrap 5.x or 4.x or 3.x](http://getbootstrap.com/) (Requires bootstrap `modal.js`) 2. Latest [JQuery](http://jquery.com/) 3. Most browsers supporting CSS3 & JQuery. Installation ------------ [](#installation) ### Using Bower [](#using-bower) You can use the `bower` package manager to install. Run: ``` bower install bootstrap-popover-x ``` ### Using Composer [](#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 [](#manual-install) You can also manually install the plugin easily to your project. Just download the source [ZIP](https://github.com/kartik-v/bootstrap-popover-x/zipball/master) or [TAR ball](https://github.com/kartik-v/bootstrap-popover-x/tarball/master) and extract the plugin assets (css and js folders) into your project. Usage ----- [](#usage) ### Load Client Assets [](#load-client-assets) You must first load the following assets in your header. ``` ``` 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 before `bootstrap-popover-x.min.js`. ### Option 1: Via data attributes [](#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. ``` Top ×Title Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. ``` ### Option 2: Via javascript [](#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. ``` Top $(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' }); }); ``` Documentation and Demo ---------------------- [](#documentation-and-demo) View the [plugin documentation](http://plugins.krajee.com/popover-x) and [plugin demos](http://plugins.krajee.com/popover-x/demo) at Krajee JQuery plugins. Contributors ------------ [](#contributors) ### Code Contributors [](#code-contributors) This project exists thanks to all the people who contribute. \[[Contribute](CONTRIBUTING.md)\]. [![](https://camo.githubusercontent.com/3edbc8bd922598ec33abce7167c3313efda1486ec05961fadbf26a6945ab4d38/68747470733a2f2f6f70656e636f6c6c6563746976652e636f6d2f626f6f7473747261702d706f706f7665722d782f636f6e7472696275746f72732e7376673f77696474683d38393026627574746f6e3d66616c7365)](https://github.com/kartik-v/bootstrap-popover-x/graphs/contributors) ### Financial Contributors [](#financial-contributors) Become a financial contributor and help us sustain our community. \[[Contribute](https://opencollective.com/bootstrap-popover-x/contribute)\] #### Individuals [](#individuals) [![](https://camo.githubusercontent.com/ec46d5de8a6ee4f0ae20dddf797299011e8bd8115ef47aa3b1cc803a3c49c98b/68747470733a2f2f6f70656e636f6c6c6563746976652e636f6d2f626f6f7473747261702d706f706f7665722d782f696e646976696475616c732e7376673f77696474683d383930)](https://opencollective.com/bootstrap-popover-x) #### Organizations [](#organizations) Support this project with your organization. Your logo will show up here with a link to your website. \[[Contribute](https://opencollective.com/bootstrap-popover-x/contribute)\] [![](https://camo.githubusercontent.com/7e65359ce12d768b96497c99635c5c0590e83e17c432bb94dc27a8b4e0aaa0ad/68747470733a2f2f6f70656e636f6c6c6563746976652e636f6d2f626f6f7473747261702d706f706f7665722d782f6f7267616e697a6174696f6e2f302f6176617461722e737667)](https://opencollective.com/bootstrap-popover-x/organization/0/website)[![](https://camo.githubusercontent.com/3c36ca6283dccdc95cdf89709ea1379e3c2b5c7ac09331c61ef97c03f0ee8b1a/68747470733a2f2f6f70656e636f6c6c6563746976652e636f6d2f626f6f7473747261702d706f706f7665722d782f6f7267616e697a6174696f6e2f312f6176617461722e737667)](https://opencollective.com/bootstrap-popover-x/organization/1/website)[![](https://camo.githubusercontent.com/9c1867b4aca59607e7e764f39d807b721136532c7e049f3cc21446e22a60860a/68747470733a2f2f6f70656e636f6c6c6563746976652e636f6d2f626f6f7473747261702d706f706f7665722d782f6f7267616e697a6174696f6e2f322f6176617461722e737667)](https://opencollective.com/bootstrap-popover-x/organization/2/website)[![](https://camo.githubusercontent.com/6d4b9922a745d5a050c1e43f5b09ee740604a1c32ea32c33a8c044c58f765c9c/68747470733a2f2f6f70656e636f6c6c6563746976652e636f6d2f626f6f7473747261702d706f706f7665722d782f6f7267616e697a6174696f6e2f332f6176617461722e737667)](https://opencollective.com/bootstrap-popover-x/organization/3/website)[![](https://camo.githubusercontent.com/aba4d6c85544ba4ab79cba9be856094342f678bc160d16b83a914a8395307ad6/68747470733a2f2f6f70656e636f6c6c6563746976652e636f6d2f626f6f7473747261702d706f706f7665722d782f6f7267616e697a6174696f6e2f342f6176617461722e737667)](https://opencollective.com/bootstrap-popover-x/organization/4/website)[![](https://camo.githubusercontent.com/908e4cca19fbe878bf5f3777d196dbb2b626def22ef090cbd5335304bbf4607e/68747470733a2f2f6f70656e636f6c6c6563746976652e636f6d2f626f6f7473747261702d706f706f7665722d782f6f7267616e697a6174696f6e2f352f6176617461722e737667)](https://opencollective.com/bootstrap-popover-x/organization/5/website)[![](https://camo.githubusercontent.com/8a9efa9aac6edcdd90bac6e4c47db01e0db95f1f29635326341ad16564e94a74/68747470733a2f2f6f70656e636f6c6c6563746976652e636f6d2f626f6f7473747261702d706f706f7665722d782f6f7267616e697a6174696f6e2f362f6176617461722e737667)](https://opencollective.com/bootstrap-popover-x/organization/6/website)[![](https://camo.githubusercontent.com/5b3ca0d3c6214081b63b4b0daadb0d0108a8a59a4e3b2bc3ca7033db10399b33/68747470733a2f2f6f70656e636f6c6c6563746976652e636f6d2f626f6f7473747261702d706f706f7665722d782f6f7267616e697a6174696f6e2f372f6176617461722e737667)](https://opencollective.com/bootstrap-popover-x/organization/7/website)[![](https://camo.githubusercontent.com/075f9ba49c8bf04faa884fab52b765c6bfde00c4bd49293c4ad83895c2332165/68747470733a2f2f6f70656e636f6c6c6563746976652e636f6d2f626f6f7473747261702d706f706f7665722d782f6f7267616e697a6174696f6e2f382f6176617461722e737667)](https://opencollective.com/bootstrap-popover-x/organization/8/website)[![](https://camo.githubusercontent.com/976d6a9858cd3599985271559719b831c8197e668f02696364c5ab9076b34fff/68747470733a2f2f6f70656e636f6c6c6563746976652e636f6d2f626f6f7473747261702d706f706f7665722d782f6f7267616e697a6174696f6e2f392f6176617461722e737667)](https://opencollective.com/bootstrap-popover-x/organization/9/website) License ------- [](#license) **bootstrap-popover-x** is released under the BSD-3-Clause License. See the bundled `LICENSE.md` for details. ### Health Score 48 — FairBetter than 95% of packages Maintenance20 Infrequent updates — may be unmaintained Popularity59 Moderate usage in the ecosystem Community26 Small or concentrated contributor base Maturity72 Established project with proven stability Bus Factor1 Top contributor holds 94.8% of commits — single point of failure How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window. **Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores. **Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement. **Maturity (30%)** — Project age, version count, PHP version support, and release stability. ### Release Activity Cadence Every ~202 days Recently: every ~226 days Total 18 Last Release 798d ago ### Community Maintainers ![](https://avatars.githubusercontent.com/u/3592619?v=4)[Kartik Visweswaran](/maintainers/kartik-v)[@kartik-v](https://github.com/kartik-v) --- Top Contributors [![kartik-v](https://avatars.githubusercontent.com/u/3592619?v=4)](https://github.com/kartik-v "kartik-v (91 commits)")[![leifcr](https://avatars.githubusercontent.com/u/421391?v=4)](https://github.com/leifcr "leifcr (2 commits)")[![monkeywithacupcake](https://avatars.githubusercontent.com/u/7316730?v=4)](https://github.com/monkeywithacupcake "monkeywithacupcake (2 commits)")[![chief-nerd](https://avatars.githubusercontent.com/u/9266151?v=4)](https://github.com/chief-nerd "chief-nerd (1 commits)") --- Tags jquerybootstrapextendedmodalpopoverpopover-xmodal-popover ### Embed Badge ![Health badge](/badges/kartik-v-bootstrap-popover-x/health.svg) ``` [![Health](https://phpackages.com/badges/kartik-v-bootstrap-popover-x/health.svg)](https://phpackages.com/packages/kartik-v-bootstrap-popover-x) ``` ### Alternatives [kartik-v/yii2-popover-x An extended bootstrap 3.0 popover widget which combines both the bootstrap popover and modal features and includes various new styling enhancements. 233.4M8](/packages/kartik-v-yii2-popover-x)[kartik-v/yii2-editable An enhanced editable widget for Yii 2.0 that allows easy editing of displayed data with numerous configuration possibilities. 1163.2M59](/packages/kartik-v-yii2-editable)[snapappointments/bootstrap-select The jQuery plugin that brings select elements into the 21st century with intuitive multiselection, searching, and much more. Now with Bootstrap 4 support. 9.8k480.4k3](/packages/snapappointments-bootstrap-select)[kartik-v/bootstrap-tabs-x Extended Bootstrap Tabs with ability to align tabs in multiple ways, add borders, rotated titles, and more. 1021.3M1](/packages/kartik-v-bootstrap-tabs-x)[kartik-v/yii2-tabs-x A supercharged Bootstrap tabs widget with ability to align tabs in multiple ways, add borders, rotated titles, and more. 301.4M20](/packages/kartik-v-yii2-tabs-x)[onokumus/metismenu A jQuery menu plugin 2.0k263.3k5](/packages/onokumus-metismenu) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)