├── img └── loading.gif ├── .github ├── FUNDING.yml ├── PULL_REQUEST_TEMPLATE.md ├── stale.yml ├── ISSUE_TEMPLATE.md └── CONTRIBUTING.md ├── composer.json ├── bower.json ├── package.json ├── LICENSE.md ├── css ├── bootstrap-popover-x.min.css └── bootstrap-popover-x.css ├── CHANGE.md ├── js ├── bootstrap-popover-x.min.js └── bootstrap-popover-x.js ├── README.md └── examples ├── bs4.html ├── bs5.html └── bs3.html /img/loading.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kartik-v/bootstrap-popover-x/HEAD/img/loading.gif -------------------------------------------------------------------------------- /.github/FUNDING.yml: -------------------------------------------------------------------------------- 1 | # These are supported funding model platforms 2 | 3 | # github: [kartik-v] 4 | open_collective: bootstrap-popover-x 5 | -------------------------------------------------------------------------------- /.github/PULL_REQUEST_TEMPLATE.md: -------------------------------------------------------------------------------- 1 | ## Scope 2 | This pull request includes a 3 | 4 | - [ ] Bug fix 5 | - [ ] New feature 6 | - [ ] Translation 7 | 8 | ## Changes 9 | The following changes were made 10 | 11 | - 12 | - 13 | - 14 | 15 | ## Related Issues 16 | If this is related to an existing ticket, include a link to it as well. -------------------------------------------------------------------------------- /.github/stale.yml: -------------------------------------------------------------------------------- 1 | # Number of days of inactivity before an issue becomes stale 2 | daysUntilStale: 60 3 | # Number of days of inactivity before a stale issue is closed 4 | daysUntilClose: 7 5 | # Issues with these labels will never be considered stale 6 | exemptLabels: 7 | - bug 8 | - enhancement 9 | - pinned 10 | - security 11 | # Label to use when marking an issue as stale 12 | staleLabel: wontfix 13 | # Comment to post when marking an issue as stale. Set to `false` to disable 14 | markComment: > 15 | This issue has been automatically marked as stale because it has not had 16 | recent activity. It will be closed if no further activity occurs. Thank you 17 | for your contributions. 18 | # Comment to post when closing a stale issue. Set to `false` to disable 19 | closeComment: false -------------------------------------------------------------------------------- /composer.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "kartik-v/bootstrap-popover-x", 3 | "description": "Bootstrap Popover Extended - Popover with modal behavior, styling enhancements and more.", 4 | "keywords": [ 5 | "bootstrap", 6 | "popover", 7 | "popover-x", 8 | "extended", 9 | "modal", 10 | "modal-popover", 11 | "jquery" 12 | ], 13 | "homepage": "https://github.com/kartik-v/bootstrap-popover-x", 14 | "license": "BSD-3-Clause", 15 | "authors": [ 16 | { 17 | "name": "Kartik Visweswaran", 18 | "email": "kartikv2@gmail.com", 19 | "homepage": "http://www.krajee.com/" 20 | } 21 | ], 22 | "autoload": { 23 | "psr-4": { 24 | "kartik\\plugins\\popover\\": "" 25 | } 26 | }, 27 | "extra": { 28 | "branch-alias": { 29 | "dev-master": "1.5.x-dev" 30 | } 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "bootstrap-popover-x", 3 | "version": "1.5.4", 4 | "homepage": "https://github.com/kartik-v/bootstrap-popover-x", 5 | "authors": [ 6 | "Kartik Visweswaran " 7 | ], 8 | "description": "Bootstrap Popover Extended - Popover with modal behavior, styling enhancements and more.", 9 | "main": [ 10 | "./css/bootstrap-popover-x.min.css", 11 | "./js/bootstrap-popover-x.min.js" 12 | ], 13 | "keywords": [ 14 | "bootstrap", 15 | "popover", 16 | "extended", 17 | "modal", 18 | "modal-popover", 19 | "jquery" 20 | ], 21 | "dependencies": { 22 | "jquery": ">= 1.9.0", 23 | "bootstrap": ">= 3.0.0" 24 | }, 25 | "license": "BSD-3", 26 | "ignore": [ 27 | "**/.*", 28 | "node_modules", 29 | "composer.json", 30 | "examples", 31 | "bower_components", 32 | "test", 33 | "tests" 34 | ] 35 | } 36 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "bootstrap-popover-x", 3 | "version": "1.5.4", 4 | "homepage": "https://github.com/kartik-v/bootstrap-popover-x", 5 | "authors": [ 6 | "Kartik Visweswaran " 7 | ], 8 | "description": "Bootstrap Popover Extended - Popover with modal behavior, styling enhancements and more.", 9 | "bugs": { 10 | "url": "https://github.com/kartik-v/bootstrap-popover-x/issues" 11 | }, 12 | "repository": { 13 | "type": "git", 14 | "url": "https://github.com/kartik-v/bootstrap-popover-x.git" 15 | }, 16 | "main": "./js/bootstrap-popover-x.min.js", 17 | "style": "./css/bootstrap-popover-x.min.css", 18 | "keywords": [ 19 | "bootstrap", 20 | "popover", 21 | "extended", 22 | "modal", 23 | "modal-popover", 24 | "jquery" 25 | ], 26 | "peerDependencies": { 27 | "jquery": ">= 1.9.0", 28 | "bootstrap": "~3" 29 | }, 30 | "license": "BSD-3-Clause", 31 | "dependencies": { 32 | "opencollective-postinstall": "^2.0.2" 33 | }, 34 | "collective": { 35 | "type": "opencollective", 36 | "url": "https://opencollective.com/bootstrap-popover-x" 37 | }, 38 | "scripts": { 39 | "postinstall": "opencollective-postinstall || true" 40 | } 41 | } -------------------------------------------------------------------------------- /LICENSE.md: -------------------------------------------------------------------------------- 1 | Copyright (c) 2014 - 2024, Kartik Visweswaran 2 | Krajee.com 3 | All rights reserved. 4 | 5 | Redistribution and use in source and binary forms, with or without modification, 6 | are permitted provided that the following conditions are met: 7 | 8 | * Redistributions of source code must retain the above copyright notice, this 9 | list of conditions and the following disclaimer. 10 | 11 | * Redistributions in binary form must reproduce the above copyright notice, this 12 | list of conditions and the following disclaimer in the documentation and/or 13 | other materials provided with the distribution. 14 | 15 | * Neither the names of Kartik Visweswaran or Krajee nor the names of its 16 | contributors may be used to endorse or promote products derived from 17 | this software without specific prior written permission. 18 | 19 | THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND 20 | ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED 21 | WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE 22 | DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR 23 | ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES 24 | (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; 25 | LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON 26 | ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT 27 | (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS 28 | SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. 29 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE.md: -------------------------------------------------------------------------------- 1 | ## Prerequisites 2 | 3 | - [ ] I have searched for similar issues in both open and closed tickets and cannot find a duplicate. 4 | - [ ] The issue still exists against the latest `master` branch of bootstrap-popover-x. 5 | - [ ] This is not an usage question. I confirm having read the plugin [documentation](http://plugins.krajee.com/popover-x) and [demos](http://plugins.krajee.com/popover-x/demo). 6 | - [ ] This is not a general programming / coding question. (Those should be directed to the [webtips Q & A forum](http://webtips.krajee.com/questions)). 7 | - [ ] I have attempted to find the simplest possible steps to reproduce the issue. 8 | - [ ] I have included a failing test as a pull request (Optional). 9 | 10 | ## Steps to reproduce the issue 11 | 12 | 1. 13 | 2. 14 | 3. 15 | 16 | ## Expected behavior and actual behavior 17 | 18 | When I follow those steps, I see... 19 | 20 | I was expecting... 21 | 22 | ## Environment 23 | 24 | Browsers 25 | 26 | - [ ] Google Chrome 27 | - [ ] Mozilla Firefox 28 | - [ ] Internet Explorer 29 | - [ ] Safari 30 | 31 | Operating System 32 | 33 | - [ ] Windows 34 | - [ ] Mac OS X 35 | - [ ] Linux 36 | - [ ] Mobile 37 | 38 | Libraries 39 | 40 | - jQuery version: 41 | - bootstrap-popover-x version: 42 | 43 | ## Isolating the problem 44 | 45 | - [ ] This bug happens [on the plugin demos page](http://plugins.krajee.com/popover-x/demo) 46 | - [ ] The bug happens consistently across all tested browsers 47 | - [ ] This bug happens when using bootstrap-popover-x without other plugins 48 | - [ ] I can reproduce this bug in [a jsbin](https://jsbin.com/) 49 | -------------------------------------------------------------------------------- /css/bootstrap-popover-x.min.css: -------------------------------------------------------------------------------- 1 | /*! 2 | * @copyright © Kartik Visweswaran, Krajee.com, 2014 - 2024 3 | * @version 1.5.4 4 | * 5 | * Bootstrap Popover Extended - Popover with modal behavior, styling enhancements and more. 6 | * 7 | * For more JQuery/Bootstrap plugins and demos visit http://plugins.krajee.com 8 | * For more Yii related demos visit http://demos.krajee.com 9 | */.popover-x{position:absolute;top:0;left:0;z-index:1070;display:none;border:1px solid rgba(0,0,0,.2);border-radius:5px;-webkit-box-shadow:0 5px 10px rgba(0,0,0,.2);box-shadow:0 5px 10px rgba(0,0,0,.2)}.popover-x .popover-title{border-radius:5px 5px 0 0}.popover-x.top{margin-top:-10px}.popover-x.right{margin-left:10px}.popover-x.bottom{margin-top:10px}.popover-x.left{margin-left:-10px}.popover-x .arrow,.popover-x .arrow:after{position:absolute;display:block;width:0;height:0;border:solid transparent}.popover-x .arrow{border-width:11px}.popover-x .arrow:after{content:"";border-width:10px}.popover-x.top .arrow{bottom:-10px;left:50%;margin-left:-10px;border-top-color:rgba(0,0,0,.25);border-bottom-width:0}.popover-x.top .arrow:after{bottom:1px;margin-left:-10px;content:" ";border-top-color:#fff;border-bottom-width:0}.popover-x.right .arrow{top:50%;left:-.98rem;margin-top:-.5rem;border-right-color:rgba(0,0,0,.25);border-left-width:0}.popover-x.is-bs5.right .arrow{left:-.65rem}.popover-x.right .arrow:after{bottom:-10px;left:1px;content:" ";border-right-color:#fff;border-left-width:0}.popover-x.bottom .arrow{top:-10px;left:50%;margin-left:-10px;border-top-width:0;border-bottom-color:rgba(0,0,0,.25)}.popover-x.bottom .arrow:after{top:1px;margin-left:-10px;content:" ";border-top-width:0;border-bottom-color:#fff}.popover-x.left .arrow{top:50%;right:-.98rem;margin-top:-.5rem;border-right-width:0;border-left-color:rgba(0,0,0,.25)}.popover-x.is-bs5.left .arrow{right:-.65rem}.popover-x.left .arrow:after{right:1px;bottom:-10px;content:" ";border-right-width:0;border-left-color:#fff}.popover-lg{min-width:480px}.popover-md{min-width:350px}.popover-x .close{line-height:0;margin-top:8px;cursor:pointer}.popover-x.is-bs5 .close{float:right;font-size:1.5rem;font-weight:700;color:#000;text-shadow:0 1px 0 #fff;opacity:.5;padding:0;border:0;background-color:transparent}.popover-x.is-bs5 .close:hover{text-decoration:none}.popover-x.bottom-right .arrow,.popover-x.top-right .arrow{left:auto;right:.85rem}.popover-x.bottom-left .arrow,.popover-x.top-left .arrow{left:.85rem}.popover-x.left-top .arrow,.popover-x.right-top .arrow{top:16px}.popover-x.left-bottom .arrow,.popover-x.right-bottom .arrow{top:auto;bottom:10px}.popover-default.bottom .arrow:after{border-bottom-color:#f7f7f7}.popover-primary.bottom .arrow:after{border-bottom-color:#cce5ff}.popover-success.bottom .arrow:after{border-bottom-color:#dff0d8}.popover-danger.bottom .arrow:after{border-bottom-color:#f2dede}.popover-warning.bottom .arrow:after{border-bottom-color:#fcf8e3}.popover-info.bottom .arrow:after{border-bottom-color:#d9edf7}.popover-default.left-top .arrow:after{border-left-color:#f7f7f7}.popover-default.right-top .arrow:after{border-right-color:#f7f7f7}.popover-primary.left-top .arrow:after{border-left-color:#cce5ff}.popover-primary.right-top .arrow:after{border-right-color:#cce5ff}.popover-success.left-top .arrow:after{border-left-color:#dff0d8}.popover-success.right-top .arrow:after{border-right-color:#dff0d8}.popover-danger.left-top .arrow:after{border-left-color:#f2dede}.popover-danger.right-top .arrow:after{border-right-color:#f2dede}.popover-warning.left-top .arrow:after{border-left-color:#fcf8e3}.popover-warning.right-top .arrow:after{border-right-color:#fcf8e3}.popover-info.left-top .arrow:after{border-left-color:#d1ecf1}.popover-info.right-top .arrow:after{border-right-color:#d1ecf1}.popover-default .popover-title{color:#333;background-color:#f7f7f7}.popover-primary .popover-title{color:#004085;background-color:#cce5ff;border-bottom:1px solid #b8daff}.popover-success .popover-title{color:#3c763d;background-color:#dff0d8;border-bottom:1px solid #d6e9c6}.popover-info .popover-title{color:#0c5460;background-color:#d1ecf1;border-bottom:1px solid #bee5eb}.popover-warning .popover-title{color:#8a6d3b;background-color:#fcf8e3;border-bottom:1px solid #faebcc}.popover-danger .popover-title{color:#a94442;background-color:#f2dede;border-bottom:1px solid #ebccd1}.popover-footer{padding:4px;background-color:#fbfbfb;text-align:right;border-top:1px solid #ebebeb;border-radius:0 0 5px 5px}.popover-footer .btn+.btn{margin-bottom:0;margin-left:4px}.popover-footer .btn-group .btn+.btn{margin-left:-1px}.popover-footer .btn-block+.btn-block{margin-left:0}.has-footer.popover-x.top .arrow:after,.popover-x.has-footer.top .arrow:after{border-top-color:#fbfbfb}.popover-x.has-footer.left-bottom .arrow:after{border-top-color:transparent;border-left-color:#fbfbfb}.popover-x.has-footer.right-bottom .arrow:after{border-top-color:transparent;border-right-color:#fbfbfb}.popover-loading{padding:30px;background:url('../img/loading.gif') center center}.popover-x-body.modal-open{overflow-y:auto!important} -------------------------------------------------------------------------------- /CHANGE.md: -------------------------------------------------------------------------------- 1 | Change Log: `bootstrap-popover-x` 2 | ================================= 3 | 4 | ## Version 1.5.4 5 | 6 | **Date:** 12-Mar-2024 7 | 8 | - (bug #51): Correct `isBs` method logic. 9 | 10 | ## Version 1.5.3 11 | 12 | **Date:** 11-Mar-2024 13 | 14 | - (bug #50): Fix and correct jQuery deprecated methods. 15 | - 16 | ## Version 1.5.2 17 | 18 | **Date:** 23-Sep-2023 19 | 20 | - (bug #47): Fix breaking changes for Boostrap library version > 5.1.3. 21 | 22 | ## Version 1.5.1 23 | 24 | **Date:** 25-Sep-2021 25 | 26 | - (bug #46): Correct android keyboard disappearing issue in popover-x embedded inputs. 27 | 28 | ## Version 1.5.0 29 | 30 | **Date:** 19-Sep-2021 31 | 32 | - Simplify NPM module handling. 33 | 34 | ## Version 1.4.9 35 | 36 | **Date:** 11-Sep-2021 37 | 38 | - (enh #45): Enhance popover-x to be initialized effectively via custom JS. 39 | Popover-x can be initialized separately via custom javascript using the `popoverButton` plugin 40 | ```js 41 | $('#myCustomButton').popoverButton({ 42 | target: '#myCustomDialog', 43 | placement: 'auto' 44 | }); 45 | ``` 46 | - (enh #44): Enhancements to popover-x to work effectively with bootstrap modals. 47 | - Enhance plugin to work better with NPM module. 48 | 49 | ## Version 1.4.8 50 | 51 | **Date:** 05-Sep-2021 52 | 53 | - (enh #43): Enhancements to support Bootstrap v5.x. 54 | - (enh #41): Correct jQuery load. 55 | - (enh #40): Correct arrow CSS styles 56 | 57 | ## Version 1.4.7 58 | 59 | **Date:** 14-Sep-2018 60 | 61 | - New `dialogCss` property to allow setting dialog CSS style attributes before load. 62 | 63 | ## Version 1.4.5 64 | 65 | **Date:** 13-Sep-2018 66 | 67 | - Enhance bootstrap 4 arrow positioning via CSS class `is-bs4` on popover container. 68 | - (enh #32): Enhancements to support Bootstrap v4.x framework. 69 | 70 | ## Version 1.4.4 71 | 72 | **Date:** 07-Sep-2017 73 | 74 | - (enh #31): Code enhancements for jQuery 3.x. 75 | - (enh #30): More intuitive screen placement depending on media size. New PopoverX plugin properties: 76 | - `autoPlaceSmallScreen`: _boolean_, defaults to `true`, and if `true` will attempt to auto place the popover on smaller screens or on window resize. 77 | - `smallScreenWidth`: _boolean_, defaults to `640`, above rule will be applied for device screen width less than this size. 78 | - Implement `package.json` for npm update. 79 | - (enh #29): Add `img` folder and indicator for the `popover-loading` css style. 80 | 81 | ## Version 1.4.3 82 | 83 | **Date:** 04-Jan-2017 84 | 85 | - (bug #28): Correct popover marker div rendering. 86 | - More correct styles for popover-x positioning behind BS navbar. 87 | 88 | ## Version 1.4.2 89 | 90 | **Date:** 04-Dec-2016 91 | 92 | - Add github contribution templates. 93 | - (enh #26): Allow scrolling of the page body after popover is shown. 94 | - (enh #25): Add ability to set `trigger` events other than click for popover button. 95 | - (enh #24): Enhance ability to register plugin via javascript. 96 | - (enh #22): Add support for require.js. 97 | - (enh #21): Add ability to support auto placement with various new auto placement settings. 98 | 99 | ## Version 1.4.1 100 | 101 | **Date:** 18-Mar-2015 102 | 103 | - (enh #10): Refactor code for bootstrap v3.3.4. 104 | - (enh #9): Set document ready to be compatible with jquery.turbolinks. 105 | 106 | ## Version 1.4.0 107 | 108 | **Date:** 17-Feb-2015 109 | 110 | - Update copyright year. 111 | - (enh #8): Implement reusable constructor for extending plugin if needed. 112 | - (enh #7): Lint changes & code formatting updates for JS & CSS. 113 | - (enh #6): Add new `useOffsetForPos` property to allow using offset instead of position. 114 | 115 | ## Version 1.3.0 116 | 117 | **Date:** 24-Nov-2014 118 | 119 | - (enh #3): Modal styling fix for eliminating unnecessary modal padding in BS 3.3.1 for popover-x 120 | 121 | ## Version 1.2.0 122 | 123 | **Date:** 08-Nov-2014 124 | 125 | - Set release to stable in composer.json. 126 | - Updated CHANGE log to reflect user friendly date time formats. 127 | 128 | ## Version 1.1.0 129 | 130 | **Date:** 24-Oct-2014 131 | 132 | - enh #2: Add eight additional placement positions. With this release, the popover-x will support these new placement options: 133 | - right 134 | - left 135 | - top 136 | - bottom 137 | - top top-left 138 | - top top-right 139 | - bottom bottom-left 140 | - bottom bottom-right 141 | - left left-top 142 | - left left-bottom 143 | - right right-top 144 | - right right-bottom 145 | 146 | ## Version 1.0.0 147 | 148 | **Date:** 15-Jul-2014 149 | 150 | Initial release. 151 | 152 | - The extended popover can be rendered just like a bootstrap modal dialog with the bootstrap popover styling. Since the plugin extends the bootstrap modal, 153 | all features of the [bootstrap modal](http://getbootstrap.com/javascript/#modals) and its methods are also available. 154 | - Adds a popover footer along with header. Configuration of the HTML content for the popover is much easier, just like a bootstrap modal. 155 | - Specially styles and spaces out bootstrap buttons added in popover footer. 156 | - Add a close icon/button to a popover window. 157 | - Configure various prebuilt styles/templates. In addition to a default (grey), the bootstrap 3 contextual color styles of `primary`, 158 | `info`, `success`, `danger`, and `warning` can be used. 159 | - Control popover placements `top`, `bottom`, `left`, or `right` of the target element. 160 | - Specially style the popover arrow to be consistent for each contextual color and popover placement. 161 | - Prebuilt CSS styles for controlling appearance and sizes of the popovers -------------------------------------------------------------------------------- /.github/CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | Contributing to bootstrap-popover-x 2 | =================================== 3 | Looking to contribute something to bootstrap-popover-x? **Here's how you can help.** 4 | 5 | Please take a moment to review this document in order to make the contribution 6 | process easy and effective for everyone involved. 7 | 8 | Following these guidelines helps to communicate that you respect the time of 9 | the developers managing and developing this open source project. In return, 10 | they should reciprocate that respect in addressing your issue or assessing 11 | patches and features. 12 | 13 | Using the issue tracker 14 | ----------------------- 15 | When [reporting bugs][reporting-bugs] or 16 | [requesting features][requesting-features], the 17 | [issue tracker on GitHub][issue-tracker] is the recommended channel to use. 18 | 19 | The issue tracker **is not** a place for support requests. Refer the 20 | [plugin documentation](http://plugins.krajee.com/popover-x), 21 | [plugin demos](http://plugins.krajee.com/popover-x/demo), and / or refer to the 22 | [webtips Q & A forum](http://webtips.krajee.com/questions) which are the better places to get help. 23 | 24 | Reporting bugs with bootstrap-popover-x 25 | --------------------------------------- 26 | We really appreciate clear bug reports that _consistently_ show an issue 27 | _within bootstrap-popover-x_. 28 | 29 | The ideal bug report follows these guidelines: 30 | 31 | 1. **Use the [GitHub issue search][issue-search]** — Check if the issue 32 | has already been reported. 33 | 2. **Check if the issue has been fixed** — Try to reproduce the problem 34 | using the code in the `master` branch. 35 | 3. **Isolate the problem** — Try to create an 36 | [isolated js fiddle][isolated-case] that consistently reproduces the problem. 37 | 38 | Please try to be as detailed as possible in your bug report, especially if an 39 | isolated test case cannot be made. Some useful questions to include the answer 40 | to are: 41 | 42 | - What steps can be used to reproduce the issue? 43 | - What is the bug and what is the expected outcome? 44 | - What browser(s) and Operating System have you tested with? 45 | - Does the bug happen consistently across all tested browsers? 46 | - What version of jQuery are you using? And what version of bootstrap-popover-x? 47 | - Are you using bootstrap-popover-x with other plugins? 48 | 49 | All of these questions will help others fix and identify any potential bugs. 50 | 51 | Requesting features in bootstrap-popover-x 52 | ------------------------------------------ 53 | Before starting work on a major feature for bootstrap-popover-x, **read the 54 | [documentation](http://plugins.krajee.com/popover-x) first** or you may risk spending a considerable amount of 55 | time on something which the project developers are not interested in bringing into the project. 56 | 57 | ### Submitting a pull request 58 | 59 | We use GitHub's pull request system for submitting patches. Here are some 60 | guidelines to follow when creating the pull request for your fix. 61 | 62 | 1. Make sure to create a ticket for your pull request. This will serve as the 63 | bug ticket, and any discussion about the bug will take place there. Your pull 64 | request will be focused on the specific changes that fix the bug. 65 | 2. Make sure to reference the ticket you are fixing within your pull request. 66 | This will allow us to close off the ticket once we merge the pull request, or 67 | follow up on the ticket if there are any related blocking issues. 68 | 3. Explain why the specific change was made. Not everyone who is reviewing your 69 | pull request will be familiar with the problem it is fixing. 70 | 4. Run your tests first. If your tests aren't passing, the pull request won't 71 | be able to be merged. If you're breaking existing tests, make sure that you 72 | aren't causing any breaking changes. 73 | 5. Only include source changes. While it's not required, only including changes 74 | from the `src` directory will prevent merge conflicts from occuring. Making 75 | this happen can be as a simple as not committing changes from the `dist` 76 | directory. 77 | 78 | By following these steps, you will make it easier for your pull request to be 79 | reviewed and eventually merged. 80 | 81 | Triaging issues and pull requests 82 | --------------------------------- 83 | Anyone can help the project maintainers triage issues and review pull requests. 84 | 85 | ### Handling new issues 86 | 87 | bootstrap-popover-x regularly receives new issues which need to be tested and organized. 88 | 89 | When a new issue that comes in that is similar to another existing issue, it 90 | should be checked to make sure it is not a duplicate. Duplicates issues should 91 | be marked by replying to the issue with "Duplicate of #[issue number]" where 92 | `[issue number]` is the url or issue number for the existing issue. This will 93 | allow the project maintainers to quickly close off additional issues and keep 94 | the discussion focused within a single issue. 95 | 96 | If you can test issues that are reported to bootstrap-popover-x that contain test cases and 97 | confirm under what conditions bugs happen, that will allow others to identify 98 | what causes a bug quicker. 99 | 100 | ### Reviewing pull requests 101 | 102 | It is very common for pull requests to be opened for issues that contain a clear 103 | solution to the problem. These pull requests should be rigorously reviewed by 104 | the community before being accepted. If you are not sure about a piece of 105 | submitted code, or know of a better way to do something, do not hesitate to make 106 | a comment on the pull request. 107 | 108 | ### Reviving old tickets 109 | 110 | If you come across tickets which have not been updated for a while, you are 111 | encouraged to revive them. While this can be as simple as saying `:+1:`, it is 112 | best if you can include more information on the issue. Common bugs and feature 113 | requests are more likely to be fixed, whether it is by the community or the 114 | developers, so keeping tickets up to date is encouraged. 115 | 116 | Licensing 117 | --------- 118 | 119 | It should also be made clear that **all code contributed to bootstrap-popover-x** must be 120 | licensable under the [BSD-3 license][licensing]. Code that cannot be released 121 | under this license **cannot be accepted** into the project. 122 | 123 | [isolated-case]: https://jsfiddle.net/ 124 | [issue-search]: https://github.com/kartik-v/bootstrap-popover-x/search?q=&type=Issues 125 | [issue-tracker]: https://github.com/kartik-v/bootstrap-popover-x/issues 126 | [licensing]: https://github.com/kartik-v/bootstrap-popover-x/blob/master/LICENSE.md 127 | [reporting-bugs]: #reporting-bugs-with-bootstrap-popover-x 128 | [requesting-features]: #requesting-features-in-bootstrap-popover-x -------------------------------------------------------------------------------- /css/bootstrap-popover-x.css: -------------------------------------------------------------------------------- 1 | /*! 2 | * @copyright © Kartik Visweswaran, Krajee.com, 2014 - 2024 3 | * @version 1.5.4 4 | * 5 | * Bootstrap Popover Extended - Popover with modal behavior, styling enhancements and more. 6 | * 7 | * For more JQuery/Bootstrap plugins and demos visit http://plugins.krajee.com 8 | * For more Yii related demos visit http://demos.krajee.com 9 | */ 10 | /* Hide popover markup by default */ 11 | .popover-x { 12 | position: absolute; 13 | top: 0; 14 | left: 0 /* rtl:ignore */; 15 | z-index: 1070; 16 | display: none; 17 | border: 1px solid #ccc; 18 | /*noinspection CssOverwrittenProperties*/ 19 | border: 1px solid rgba(0, 0, 0, .2); 20 | border-radius: 5px; 21 | -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, .2); 22 | box-shadow: 0 5px 10px rgba(0, 0, 0, .2); 23 | } 24 | 25 | .popover-x .popover-title { 26 | border-radius: 5px 5px 0 0; 27 | } 28 | 29 | /* Popover & arrow styles for BS4 */ 30 | .popover-x.top { 31 | margin-top: -10px; 32 | } 33 | 34 | .popover-x.right { 35 | margin-left: 10px; 36 | } 37 | 38 | .popover-x.bottom { 39 | margin-top: 10px; 40 | } 41 | 42 | .popover-x.left { 43 | margin-left: -10px; 44 | } 45 | 46 | .popover-x .arrow, .popover-x .arrow:after { 47 | position: absolute; 48 | display: block; 49 | width: 0; 50 | height: 0; 51 | border: solid transparent; 52 | } 53 | 54 | .popover-x .arrow { 55 | border-width: 11px; 56 | } 57 | 58 | .popover-x .arrow:after { 59 | content: ""; 60 | border-width: 10px; 61 | } 62 | 63 | .popover-x.top .arrow { 64 | bottom: -10px; 65 | left: 50%; 66 | margin-left: -10px; 67 | border-top-color: #999; 68 | border-top-color: rgba(0, 0, 0, .25); 69 | border-bottom-width: 0; 70 | } 71 | 72 | .popover-x.top .arrow:after { 73 | bottom: 1px; 74 | margin-left: -10px; 75 | content: " "; 76 | border-top-color: #fff; 77 | border-bottom-width: 0; 78 | } 79 | 80 | .popover-x.right .arrow { 81 | top: 50%; 82 | left: -0.98rem; 83 | margin-top: -0.5rem; 84 | border-right-color: #999; 85 | border-right-color: rgba(0, 0, 0, .25); 86 | border-left-width: 0; 87 | } 88 | 89 | .popover-x.is-bs5.right .arrow { 90 | left: -0.65rem; 91 | } 92 | 93 | .popover-x.right .arrow:after { 94 | bottom: -10px; 95 | left: 1px; 96 | content: " "; 97 | border-right-color: #fff; 98 | border-left-width: 0; 99 | } 100 | 101 | .popover-x.bottom .arrow { 102 | top: -10px; 103 | left: 50%; 104 | margin-left: -10px; 105 | border-top-width: 0; 106 | border-bottom-color: #999; 107 | border-bottom-color: rgba(0, 0, 0, .25); 108 | } 109 | 110 | .popover-x.bottom .arrow:after { 111 | top: 1px; 112 | margin-left: -10px; 113 | content: " "; 114 | border-top-width: 0; 115 | border-bottom-color: #fff; 116 | } 117 | 118 | .popover-x.left .arrow { 119 | top: 50%; 120 | right: -0.98rem; 121 | margin-top: -0.5rem; 122 | border-right-width: 0; 123 | border-left-color: #999; 124 | border-left-color: rgba(0, 0, 0, .25); 125 | } 126 | 127 | .popover-x.is-bs5.left .arrow { 128 | right: -0.65rem; 129 | } 130 | 131 | .popover-x.left .arrow:after { 132 | right: 1px; 133 | bottom: -10px; 134 | content: " "; 135 | border-right-width: 0; 136 | border-left-color: #fff; 137 | } 138 | 139 | /* Sizes */ 140 | .popover-lg { 141 | min-width: 480px; 142 | } 143 | 144 | .popover-md { 145 | min-width: 350px; 146 | } 147 | 148 | .popover-x .close { 149 | line-height: 0; 150 | margin-top: 8px; 151 | cursor: pointer; 152 | } 153 | 154 | .popover-x.is-bs5 .close { 155 | float: right; 156 | font-size: 1.5rem; 157 | font-weight: 700; 158 | color: #000; 159 | text-shadow: 0 1px 0 #fff; 160 | opacity: .5; 161 | padding: 0; 162 | border: 0; 163 | background-color: transparent; 164 | } 165 | 166 | .popover-x.is-bs5 .close:hover { 167 | text-decoration: none; 168 | } 169 | 170 | .popover-x.top-right .arrow, .popover-x.bottom-right .arrow { 171 | left: auto; 172 | right: 0.85rem; 173 | } 174 | 175 | .popover-x.top-left .arrow, .popover-x.bottom-left .arrow { 176 | left: 0.85rem; 177 | } 178 | 179 | .popover-x.left-top .arrow, .popover-x.right-top .arrow { 180 | top: 16px; 181 | } 182 | 183 | .popover-x.left-bottom .arrow, .popover-x.right-bottom .arrow { 184 | top: auto; 185 | bottom: 10px; 186 | } 187 | 188 | .popover-default.bottom .arrow:after { 189 | border-bottom-color: #f7f7f7; 190 | } 191 | 192 | .popover-primary.bottom .arrow:after { 193 | border-bottom-color: #cce5ff; 194 | } 195 | 196 | .popover-success.bottom .arrow:after { 197 | border-bottom-color: #dff0d8; 198 | } 199 | 200 | .popover-danger.bottom .arrow:after { 201 | border-bottom-color: #f2dede; 202 | } 203 | 204 | .popover-warning.bottom .arrow:after { 205 | border-bottom-color: #fcf8e3; 206 | } 207 | 208 | .popover-info.bottom .arrow:after { 209 | border-bottom-color: #d9edf7; 210 | } 211 | 212 | .popover-default.left-top .arrow:after { 213 | border-left-color: #f7f7f7; 214 | } 215 | 216 | .popover-default.right-top .arrow:after { 217 | border-right-color: #f7f7f7; 218 | } 219 | 220 | .popover-primary.left-top .arrow:after { 221 | border-left-color: #cce5ff; 222 | } 223 | 224 | .popover-primary.right-top .arrow:after { 225 | border-right-color: #cce5ff; 226 | } 227 | 228 | .popover-success.left-top .arrow:after { 229 | border-left-color: #dff0d8; 230 | } 231 | 232 | .popover-success.right-top .arrow:after { 233 | border-right-color: #dff0d8; 234 | } 235 | 236 | .popover-danger.left-top .arrow:after { 237 | border-left-color: #f2dede; 238 | } 239 | 240 | .popover-danger.right-top .arrow:after { 241 | border-right-color: #f2dede; 242 | } 243 | 244 | .popover-warning.left-top .arrow:after { 245 | border-left-color: #fcf8e3; 246 | } 247 | 248 | .popover-warning.right-top .arrow:after { 249 | border-right-color: #fcf8e3; 250 | } 251 | 252 | .popover-info.left-top .arrow:after { 253 | border-left-color: #d1ecf1; 254 | } 255 | 256 | .popover-info.right-top .arrow:after { 257 | border-right-color: #d1ecf1; 258 | } 259 | 260 | .popover-default .popover-title { 261 | color: #333; 262 | background-color: #f7f7f7; 263 | } 264 | 265 | .popover-primary .popover-title { 266 | color: #004085; 267 | background-color: #cce5ff; 268 | border-bottom: 1px solid #b8daff; 269 | } 270 | 271 | .popover-success .popover-title { 272 | color: #3c763d; 273 | background-color: #dff0d8; 274 | border-bottom: 1px solid #d6e9c6; 275 | } 276 | 277 | .popover-info .popover-title { 278 | color: #0c5460; 279 | background-color: #d1ecf1; 280 | border-bottom: 1px solid #bee5eb; 281 | } 282 | 283 | .popover-warning .popover-title { 284 | color: #8a6d3b; 285 | background-color: #fcf8e3; 286 | border-bottom: 1px solid #faebcc; 287 | } 288 | 289 | .popover-danger .popover-title { 290 | color: #a94442; 291 | background-color: #f2dede; 292 | border-bottom: 1px solid #ebccd1; 293 | } 294 | 295 | .popover-footer { 296 | padding: 4px; 297 | background-color: #fbfbfb; 298 | text-align: right; 299 | border-top: 1px solid #ebebeb; 300 | border-radius: 0 0 5px 5px; 301 | } 302 | 303 | .popover-footer .btn + .btn { 304 | margin-bottom: 0; 305 | margin-left: 4px; 306 | } 307 | 308 | .popover-footer .btn-group .btn + .btn { 309 | margin-left: -1px; 310 | } 311 | 312 | .popover-footer .btn-block + .btn-block { 313 | margin-left: 0; 314 | } 315 | 316 | .popover-x.has-footer.top .arrow:after, .has-footer.popover-x.top .arrow:after { 317 | border-top-color: #fbfbfb; 318 | } 319 | 320 | .popover-x.has-footer.left-bottom .arrow:after { 321 | border-top-color: transparent; 322 | border-left-color: #fbfbfb; 323 | } 324 | 325 | .popover-x.has-footer.right-bottom .arrow:after { 326 | border-top-color: transparent; 327 | border-right-color: #fbfbfb; 328 | } 329 | 330 | .popover-loading { 331 | padding: 30px; 332 | background: url('../img/loading.gif') center center; 333 | } 334 | 335 | .popover-x-body.modal-open { 336 | overflow-y: auto !important; 337 | } -------------------------------------------------------------------------------- /js/bootstrap-popover-x.min.js: -------------------------------------------------------------------------------- 1 | /*! 2 | * @copyright © Kartik Visweswaran, Krajee.com, 2014 - 2024 3 | * @version 1.5.4 4 | * 5 | * Bootstrap Popover Extended - Popover with modal behavior, styling enhancements and more. 6 | * 7 | * For more JQuery/Bootstrap plugins and demos visit http://plugins.krajee.com 8 | * For more Yii related demos visit http://demos.krajee.com 9 | */ 10 | !function(t){"use strict";"function"==typeof define&&define.amd?define(["jquery"],t):"object"==typeof module&&"object"==typeof module.exports?t(require("jquery")):t(window.jQuery)}(function(t){"use strict";var o,e,i;t.fn.popoverXBsVersion||(t.fn.popoverXBsVersion=window.bootstrap&&window.bootstrap.Modal&&bootstrap.Modal.VERSION||window.Modal&&window.Modal.VERSION||"3.x.x"),o={NAMESPACE:".popoverX",modalOptions:["keyboard","focus","show"],kvLog:function(t){t="bootstrap-popover-x: "+t,window.console&&window.console.log?window.console.log(t):window.alert(t)},addCss:function(t,o){t.removeClass(o).addClass(o)},handler:function(t,e,i){var r=e+o.NAMESPACE;return t.off(r).on(r,i)},raise:function(t,e,i){var r=e+(void 0===i?".target":i)+o.NAMESPACE;return t.trigger(r)},isBs:function(o){var e=t.fn.popoverXBsVersion,i=(null==e?"":e).toString().trim();return e=parseInt(o,10),i?e===parseInt(i.charAt(0),10):4===e},getDataAttr:function(t){return"data-"+(o.isBs(5)?"bs-":"")+t}},i=function(o,e){this.options=e,this.$element=t(o),this.$dialog=this.$element,this.init()},(e=function(o,e){this.options=e,this.$element=t(o),this.init()}).prototype={constructor:e,init:function(){var e,i,r=this,n=r.$element,a=r.options||{},s=n.attr("href"),p=function(t){o.kvLog("PopoverX initialization skipped! "+t)};if(r.href=s,n&&n.length)if(n.attr("data-toggle","popover-x"),a.target?(n.data("target",a.target),i=t(a.target)):i=t(n.data("target")||s&&s.replace(/.*(?=#[^\s]+$)/,"")),i.length){if(r.$dialog=i,i.attr(o.getDataAttr("backdrop"),"false"),o.addCss(i,"popover-x"),!i.data("popover-x")){var l=t.extend(!0,{remote:s&&!/#/.test(s)},i.data(),n.data(),a);l.$target=n,i.popoverX(l)}"string"==typeof(e=a.trigger)?(e=e.split(" "),t.each(e,function(t,o){r.listen(o)})):p("Invalid or improper configuration for PopoverX trigger.")}else p("PopoverX dialog element could not be found.");else p("PopoverX triggering button element could not be found.")},listen:function(t){var e,i,r=this.$element,n=this.$dialog,a=!1,s=this.href;"manual"!==t&&("click"!==t&&"keyup"!==t&&(a=!0),a?(e="hover"===t?"mouseenter":"focusin",i="hover"===t?"mouseleave":"focusout",o.handler(r,e,function(){o.raise(n,e).popoverX("show")}),o.handler(r,i,function(){o.raise(n,i).popoverX("hide")})):o.handler(r,t,function(e){"keyup"!==t?(s&&"click"===t&&e.preventDefault(),o.raise(n,t).popoverX("toggle"),o.handler(n,"hide",function(){r.focus()})):n&&27===e.which&&o.raise(n,t).popoverX("hide")}))},destroy:function(){this.$element.off(o.NAMESPACE),this.$dialog.modal("dispose").off(o.NAMESPACE)}},i.prototype={constructor:i,init:function(){var e=this,i=e.$element,r=e.options,n=r.$container,a=o.isBs(5);n&&n.length&&(e.$body=n),e.$body&&e.$body.length||(e.$body=t(document.body)),t.each(o.modalOptions,function(t,e){r[e]&&i.attr(o.getDataAttr(e),r[e])}),i.attr(o.getDataAttr("backdrop"),"false"),a&&!i.find(".modal-dialog").length&&(t(document.createElement("div")).addClass("modal-dialog").css({margin:0,"pointer-events":"all"}).insertAfter(i).append(i.contents()).appendTo(i),o.addCss(i.find(".arrow"),"popover-arrow")),o.addCss(i,"is-bs"+t.fn.popoverXBsVersion.charAt(0)),e.bodyPadding=e.$body.css("padding"),e.$target=e.options.$target,e.$marker=t(document.createElement("div")).addClass("popover-x-marker").insertAfter(i).hide(),i.find(".popover-footer").length&&o.addCss(i,"has-footer"),e.options.remote&&i.find(".popover-content").on("load",e.options.remote,function(){i.trigger("load.complete.popoverX")}),i.on("click.dismiss"+o.NAMESPACE,'[data-dismiss="popover-x"]',t.proxy(e.hide,e)),r.closePopoverOnBlur&&t(document).on("click",function(o){var e=t(o.target);e.closest('[data-toggle="popover-x"]').length||(e.closest(".popover-x").length?o.stopPropagation():t(".popover-x:visible").popoverX("hide"))});var s,p="hide.bs.modal.popoverX",l=t(".modal");l.length&&(s=l.find("[data-toggle='popover-x']")).length&&l.off(p).on(p,function(){s.each(function(){var o=t(this).data("target")||null,e=t(o);e.length&&e.is(":visible")&&e.popoverX("hide")})}),t(window).resize(function(){!("ontouchstart"in window||navigator.maxTouchPoints>0||navigator.msMaxTouchPoints>0)&&i.hasClass("kv-popover-active")&&(e.hide(),setTimeout(function(){e.show(!0)},50))})},getPlacement:function(){var t=this.getPosition(),o=this.options.placement,e=document.documentElement,i=document.body,r=e.clientWidth,n=e.clientHeight,a=Math.max(i.scrollTop||0,e.scrollTop),s="horizontal"===o,p=Math.max(i.scrollLeft||0,e.scrollLeft),l="vertical"===o,d=Math.max(0,t.left-p),f=Math.max(0,t.top-a),h="auto"===o||s||l,c=window.innerWidth||e||document.body.clientWidth;if(this.options.autoPlaceSmallScreen&&c 2 | 3 | Krajee Logo 4 | 5 |
6 | bootstrap-popover-x 7 |
8 | Donate 10 |       11 | kartikv 12 | 13 | 14 |
15 | 16 | [![Financial Contributors on Open Collective](https://opencollective.com/bootstrap-popover-x/all/badge.svg?label=financial+contributors)](https://opencollective.com/bootstrap-popover-x) 17 | [![Bower version](https://badge.fury.io/bo/bootstrap-popover-x.svg)](http://badge.fury.io/bo/bootstrap-popover-x) 18 | [![Latest Stable Version](https://poser.pugx.org/kartik-v/bootstrap-popover-x/v/stable)](https://packagist.org/packages/kartik-v/bootstrap-popover-x) 19 | [![License](https://poser.pugx.org/kartik-v/bootstrap-popover-x/license)](https://packagist.org/packages/kartik-v/bootstrap-popover-x) 20 | [![Packagist Downloads](https://poser.pugx.org/kartik-v/bootstrap-popover-x/downloads)](https://packagist.org/packages/kartik-v/bootstrap-popover-x) 21 | [![Monthly Downloads](https://poser.pugx.org/kartik-v/bootstrap-popover-x/d/monthly)](https://packagist.org/packages/kartik-v/bootstrap-popover-x) 22 | 23 |
24 | 25 | 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. 26 | 27 | > 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. 28 | 29 | ## Features 30 | 31 | The plugin offers these enhanced features: 32 | 33 | - The extended popover can be rendered just like a bootstrap modal dialog with the bootstrap popover styling. Since the plugin extends the bootstrap modal, 34 | all features of the [bootstrap modal](https://getbootstrap.com/docs/4.0/components/modal/) and its methods are also available. 35 | - Adds a popover footer along with header. Configuration of the HTML content for the popover is much easier, just like a bootstrap modal. 36 | - Specially styles and spaces out bootstrap buttons added in popover footer. 37 | - Add a close icon/button to a popover window. 38 | - Configure various prebuilt styles/templates. In addition to a default (grey), the bootstrap 3 contextual color styles of `primary`, 39 | `info`, `success`, `danger`, and `warning` can be used. 40 | - Control popover placements with respect to the target element. The plugin supports 12 different placement options: 41 | - right 42 | - left 43 | - top 44 | - bottom 45 | - top top-left 46 | - top top-right 47 | - bottom bottom-left 48 | - bottom bottom-right 49 | - left left-top 50 | - left left-bottom 51 | - right right-top 52 | - right right-bottom 53 | - auto 54 | - auto-top 55 | - auto-right 56 | - auto-bottom 57 | - auto-left 58 | - horizontal 59 | - vertical 60 | - Specially style the popover arrow to be consistent for each contextual color and popover placement. 61 | - Prebuilt CSS styles for controlling appearance and sizes of the popovers 62 | - Ability to initialize and set popovers via javascript using the PopoverButton plugin. 63 | - 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`. 64 | - Allow scrolling of the page with popover displayed (unlike bootstrap modal). 65 | - Styling enhancements for popover to not overlay but stay behind the bootstrap navbar. 66 | 67 | ## Demo 68 | 69 | View the [plugin documentation](http://plugins.krajee.com/popover-x) and [plugin demos](http://plugins.krajee.com/popover-x/demo) at Krajee JQuery plugins. 70 | 71 | ## Pre-requisites 72 | 73 | 1. [Bootstrap 5.x or 4.x or 3.x](http://getbootstrap.com/) (Requires bootstrap `modal.js`) 74 | 2. Latest [JQuery](http://jquery.com/) 75 | 3. Most browsers supporting CSS3 & JQuery. 76 | 77 | ## Installation 78 | 79 | ### Using Bower 80 | You can use the `bower` package manager to install. Run: 81 | 82 | bower install bootstrap-popover-x 83 | 84 | ### Using Composer 85 | You can use the `composer` package manager to install. Either run: 86 | 87 | $ php composer.phar require kartik-v/bootstrap-popover-x "dev-master" 88 | 89 | or add: 90 | 91 | "kartik-v/bootstrap-popover-x": "dev-master" 92 | 93 | to your composer.json file 94 | 95 | ### Manual Install 96 | 97 | 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. 98 | 99 | ## Usage 100 | 101 | ### Load Client Assets 102 | 103 | You must first load the following assets in your header. 104 | 105 | ```html 106 | 107 | 108 | 109 | 110 | 111 | 112 | 113 | ``` 114 | 115 | 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 116 | the plugin to work with default settings. 117 | 118 | > Note: The plugin extends the **bootstrap modal plugin** and hence the `bootstrap.min.js` must be loaded before `bootstrap-popover-x.min.js`. 119 | 120 | ### Option 1: Via data attributes 121 | 122 | After loading the assets, setup your input markup for the extended popover plugin. You can activate the extended popover without writing JavaScript. 123 | Set `data-toggle="popover-x"` on a controller element, like a button, along with a `data-target="#foo"` or `href="#foo"` 124 | to target a specific popover to toggle. 125 | 126 | ```html 127 | 128 |
129 |
130 |

×Title

131 |
132 |

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.

133 |
134 |
135 | ``` 136 | 137 | ### Option 2: Via javascript 138 | 139 | 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. 140 | 141 | ```html 142 | <-- for example with the following button markup and using the same popover content markup above --> 143 | 144 | 157 | ``` 158 | 159 | ## Documentation and Demo 160 | 161 | View the [plugin documentation](http://plugins.krajee.com/popover-x) and [plugin demos](http://plugins.krajee.com/popover-x/demo) at Krajee JQuery plugins. 162 | 163 | ## Contributors 164 | 165 | ### Code Contributors 166 | 167 | This project exists thanks to all the people who contribute. [[Contribute](CONTRIBUTING.md)]. 168 | 169 | 170 | ### Financial Contributors 171 | 172 | Become a financial contributor and help us sustain our community. [[Contribute](https://opencollective.com/bootstrap-popover-x/contribute)] 173 | 174 | #### Individuals 175 | 176 | 177 | 178 | #### Organizations 179 | 180 | 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)] 181 | 182 | 183 | 184 | 185 | 186 | 187 | 188 | 189 | 190 | 191 | 192 | 193 | ## License 194 | 195 | **bootstrap-popover-x** is released under the BSD-3-Clause License. See the bundled `LICENSE.md` for details. -------------------------------------------------------------------------------- /js/bootstrap-popover-x.js: -------------------------------------------------------------------------------- 1 | /*! 2 | * @copyright © Kartik Visweswaran, Krajee.com, 2014 - 2024 3 | * @version 1.5.4 4 | * 5 | * Bootstrap Popover Extended - Popover with modal behavior, styling enhancements and more. 6 | * 7 | * For more JQuery/Bootstrap plugins and demos visit http://plugins.krajee.com 8 | * For more Yii related demos visit http://demos.krajee.com 9 | */ 10 | (function (factory) { 11 | 'use strict'; 12 | if (typeof define === 'function' && define.amd) { 13 | define(['jquery'], factory); 14 | } else if (typeof module === 'object' && typeof module.exports === 'object') { 15 | factory(require('jquery')); 16 | } else { 17 | factory(window.jQuery); 18 | } 19 | }(function ($) { 20 | 'use strict'; 21 | 22 | if (!$.fn.popoverXBsVersion) { 23 | $.fn.popoverXBsVersion = (window.bootstrap && window.bootstrap.Modal && bootstrap.Modal.VERSION) || 24 | (window.Modal && window.Modal.VERSION) || '3.x.x'; 25 | } 26 | 27 | var $h, PopoverButton, PopoverX; 28 | // global helper object 29 | $h = { 30 | NAMESPACE: '.popoverX', 31 | modalOptions: ['keyboard', 'focus', 'show'], 32 | kvLog: function (msg) { 33 | msg = 'bootstrap-popover-x: ' + msg; 34 | if (window.console && window.console.log) { 35 | window.console.log(msg); 36 | } else { 37 | window.alert(msg); 38 | } 39 | }, 40 | addCss: function ($el, css) { 41 | $el.removeClass(css).addClass(css); 42 | }, 43 | handler: function ($el, event, callback) { 44 | var ev = event + $h.NAMESPACE; 45 | return $el.off(ev).on(ev, callback); 46 | }, 47 | raise: function ($el, event, prefix) { 48 | var ev = event + (prefix === undefined ? '.target' : prefix) + $h.NAMESPACE; 49 | return $el.trigger(ev); 50 | }, 51 | isBs: function (v) { 52 | var ver = $.fn.popoverXBsVersion; 53 | var chk = (ver === undefined || ver === null ? "" : ver).toString().trim(); 54 | ver = parseInt(v, 10); 55 | if (!chk) { 56 | return ver === 4; 57 | } 58 | return ver === parseInt(chk.charAt(0), 10); 59 | 60 | }, 61 | getDataAttr: function (prop) { 62 | return 'data-' + ($h.isBs(5) ? 'bs-' : '') + prop; 63 | } 64 | }; 65 | // popover button plugin 66 | PopoverButton = function (element, options) { 67 | var self = this; 68 | self.options = options; 69 | self.$element = $(element); 70 | self.init(); 71 | }; 72 | // popover extended plugin 73 | PopoverX = function (element, options) { 74 | var self = this; 75 | self.options = options; 76 | self.$element = $(element); 77 | self.$dialog = self.$element; 78 | self.init(); 79 | }; 80 | // popover button plugin prototype 81 | PopoverButton.prototype = { 82 | constructor: PopoverButton, 83 | init: function () { 84 | var self = this, $el = self.$element, options = self.options || {}, triggers, $dialog, 85 | href = $el.attr('href'), initException = function (msg) { 86 | $h.kvLog('PopoverX initialization skipped! ' + msg); 87 | }; 88 | self.href = href; 89 | if (!$el || !$el.length) { 90 | initException('PopoverX triggering button element could not be found.'); 91 | return; 92 | } 93 | 94 | // always set this to get the closePopoverOnBlur behavior correct 95 | $el.attr('data-toggle', 'popover-x'); 96 | 97 | if (options.target) { 98 | $el.data('target', options.target) 99 | $dialog = $(options.target); 100 | } else { 101 | $dialog = $($el.data('target') || (href && href.replace(/.*(?=#[^\s]+$)/, ''))); //strip for ie7 102 | } 103 | 104 | if (!$dialog.length) { 105 | initException('PopoverX dialog element could not be found.'); 106 | return; 107 | } 108 | self.$dialog = $dialog; 109 | 110 | // disable modal backdrop for popover-x permanently 111 | $dialog.attr($h.getDataAttr('backdrop'), 'false'); 112 | 113 | // init popover-x styling 114 | $h.addCss($dialog, 'popover-x'); 115 | 116 | if (!$dialog.data('popover-x')) { 117 | var opts = $.extend(true, {remote: href && !/#/.test(href)}, $dialog.data(), $el.data(), options); 118 | opts.$target = $el; 119 | $dialog.popoverX(opts); 120 | } 121 | triggers = options.trigger; 122 | if (typeof triggers !== 'string') { 123 | initException('Invalid or improper configuration for PopoverX trigger.'); 124 | return; 125 | } 126 | triggers = triggers.split(" "); 127 | $.each(triggers, function (key, event) { 128 | self.listen(event); 129 | }); 130 | }, 131 | listen: function (ev) { 132 | var self = this, $el = self.$element, $dialog = self.$dialog, isHover = false, evIn, evOut, 133 | href = self.href; 134 | if (ev === 'manual') { 135 | return; 136 | } 137 | if (ev !== 'click' && ev !== 'keyup') { 138 | isHover = true; 139 | } 140 | if (isHover) { 141 | evIn = ev === 'hover' ? 'mouseenter' : 'focusin'; 142 | evOut = ev === 'hover' ? 'mouseleave' : 'focusout'; 143 | $h.handler($el, evIn, function () { 144 | $h.raise($dialog, evIn).popoverX('show'); 145 | }); 146 | $h.handler($el, evOut, function () { 147 | $h.raise($dialog, evOut).popoverX('hide'); 148 | }); 149 | } else { 150 | $h.handler($el, ev, function (e) { 151 | if (ev === 'keyup') { 152 | if ($dialog && e.which === 27) { 153 | $h.raise($dialog, ev).popoverX('hide'); 154 | } 155 | return; 156 | } 157 | if (href && ev === 'click') { 158 | e.preventDefault(); 159 | } 160 | $h.raise($dialog, ev).popoverX('toggle'); 161 | $h.handler($dialog, 'hide', function () { 162 | $el.focus(); 163 | }); 164 | }); 165 | } 166 | }, 167 | destroy: function () { 168 | var self = this; 169 | self.$element.off($h.NAMESPACE); 170 | self.$dialog.modal('dispose').off($h.NAMESPACE); 171 | } 172 | }; 173 | // popover extended plugin prototype 174 | PopoverX.prototype = { 175 | constructor: PopoverX, 176 | init: function () { 177 | var self = this, $dialog = self.$element, opts = self.options, $container = opts.$container, 178 | isBs5 = $h.isBs(5); 179 | if ($container && $container.length) { 180 | self.$body = $container; 181 | } 182 | if (!self.$body || !self.$body.length) { 183 | self.$body = $(document.body); 184 | } 185 | $.each($h.modalOptions, function (key, prop) { 186 | if (opts[prop]) { 187 | $dialog.attr($h.getDataAttr(prop), opts[prop]); 188 | } 189 | }); 190 | 191 | // disable modal backdrop for popover-x permanently 192 | $dialog.attr($h.getDataAttr('backdrop'), 'false'); 193 | 194 | if (isBs5 && !$dialog.find('.modal-dialog').length) { 195 | $(document.createElement('div')).addClass('modal-dialog').css({margin: 0, 'pointer-events': 'all'}) 196 | .insertAfter($dialog).append($dialog.contents()).appendTo($dialog); 197 | $h.addCss($dialog.find('.arrow'), 'popover-arrow'); 198 | } 199 | $h.addCss($dialog, 'is-bs' + $.fn.popoverXBsVersion.charAt(0)); 200 | self.bodyPadding = self.$body.css('padding'); 201 | self.$target = self.options.$target; 202 | self.$marker = $(document.createElement('div')).addClass('popover-x-marker').insertAfter($dialog).hide(); 203 | if ($dialog.find('.popover-footer').length) { 204 | $h.addCss($dialog, 'has-footer'); 205 | } 206 | if (self.options.remote) { 207 | $dialog.find('.popover-content').on('load', self.options.remote, function () { 208 | $dialog.trigger('load.complete.popoverX'); 209 | }); 210 | } 211 | $dialog.on('click.dismiss' + $h.NAMESPACE, '[data-dismiss="popover-x"]', $.proxy(self.hide, self)); 212 | 213 | if (opts.closePopoverOnBlur) { 214 | $(document).on('click', function (e) { 215 | var $clicked = $(e.target); 216 | if ($clicked.closest('[data-toggle="popover-x"]').length) { 217 | return; 218 | } else if ($clicked.closest('.popover-x').length) { 219 | e.stopPropagation(); 220 | } else { 221 | $('.popover-x:visible').popoverX('hide'); 222 | } 223 | }); 224 | } 225 | 226 | // close any open popovers embedded inside any bootstrap modal dialog 227 | var ev = 'hide.bs.modal.popoverX', $modal = $('.modal'), $popovers; 228 | if ($modal.length) { 229 | $popovers = $modal.find("[data-toggle='popover-x']"); 230 | if ($popovers.length) { 231 | $modal.off(ev).on(ev, function () { 232 | $popovers.each(function () { 233 | var targ = $(this).data('target') || null, $popover = $(targ); 234 | if ($popover.length && $popover.is(':visible')) { 235 | $popover.popoverX('hide'); 236 | } 237 | }); 238 | }); 239 | } 240 | } 241 | $(window).resize(function () { 242 | var isTouch = ('ontouchstart' in window) || (navigator.maxTouchPoints > 0) || 243 | (navigator.msMaxTouchPoints > 0); 244 | if (!isTouch && $dialog.hasClass('kv-popover-active')) { 245 | self.hide(); 246 | setTimeout(function () { 247 | self.show(true); 248 | }, 50); 249 | } 250 | }); 251 | }, 252 | getPlacement: function () { 253 | var self = this, pos = self.getPosition(), placement = self.options.placement, 254 | de = document.documentElement, db = document.body, cw = de.clientWidth, ch = de.clientHeight, 255 | scrollTop = Math.max(db.scrollTop || 0, de.scrollTop), isH = placement === 'horizontal', 256 | scrollLeft = Math.max(db.scrollLeft || 0, de.scrollLeft), isV = placement === 'vertical', 257 | pageX = Math.max(0, pos.left - scrollLeft), pageY = Math.max(0, pos.top - scrollTop), 258 | autoPlace = placement === 'auto' || isH || isV, 259 | width = window.innerWidth || de || document.body.clientWidth; 260 | if (self.options.autoPlaceSmallScreen && width < self.options.smallScreenWidth) { 261 | autoPlace = true; 262 | } 263 | if (autoPlace) { 264 | if (pageX < cw / 3) { 265 | if (pageY < ch / 3) { 266 | return isH ? 'right right-top' : 'bottom bottom-left'; 267 | } 268 | if (pageY < ch * 2 / 3) { 269 | return isV ? (pageY <= ch / 2 ? 'bottom bottom-left' : 'top top-left') : 'right'; 270 | } 271 | return isH ? 'right right-bottom' : 'top top-left'; 272 | } 273 | if (pageX < cw * 2 / 3) { 274 | if (pageY < ch / 3) { 275 | return isH ? (pageX <= cw / 2 ? 'right right-top' : 'left left-top') : 'bottom'; 276 | } 277 | if (pageY < ch * 2 / 3) { 278 | return isH ? pageX <= cw / 2 ? 'right' : 'left' : pageY <= ch / 2 ? 'bottom' : 'top'; 279 | } 280 | return isH ? pageX <= cw / 2 ? 'right right-bottom' : 'left left-bottom' : 'top'; 281 | } 282 | if (pageY < ch / 3) { 283 | return isH ? 'left left-top' : 'bottom bottom-left'; 284 | } 285 | if (pageY < ch * 2 / 3) { 286 | return isV ? pageY <= ch / 2 ? 'bottom-right' : 'top-right' : 'left'; 287 | } 288 | return isH ? 'left left-bottom' : 'top top-left'; 289 | } 290 | switch (placement) { 291 | case 'auto-top': 292 | return pageX < cw / 3 ? 'top top-left' : (pageX < cw * 2 / 3 ? 'top' : 'top top-right'); 293 | case 'auto-bottom': 294 | return pageX < cw / 3 ? 'bottom bottom-left' : (pageX < cw * 2 / 3 ? 'bottom' : 'bottom bottom-right'); 295 | case 'auto-left': 296 | return pageY < ch / 3 ? 'left left-top' : (pageY < ch * 2 / 3 ? 'left' : 'left left-bottom'); 297 | case 'auto-right': 298 | return pageY < ch / 3 ? 'right right-top' : (pageY < ch * 2 / 3 ? 'right' : 'right right-bottom'); 299 | default: 300 | return placement; 301 | } 302 | }, 303 | getPosition: function () { 304 | var self = this, $el = self.$target, elRect = $el[0].getBoundingClientRect(), $container = self.$body, 305 | cssPos = $container.css('position'); 306 | if ($container.is(document.body) || cssPos === 'static') { 307 | return $.extend({}, $el.offset(), { 308 | width: $el[0].offsetWidth || elRect.width, 309 | height: $el[0].offsetHeight || elRect.height 310 | }); 311 | } 312 | if (cssPos === 'relative') { 313 | return { 314 | top: $el.offset().top - $container.offset().top, 315 | left: $el.offset().left - $container.offset().left, 316 | width: $el[0].offsetWidth || elRect.width, 317 | height: $el[0].offsetHeight || elRect.height 318 | }; 319 | } 320 | // else cssPos = 'fixed' 321 | var containerRect = $container[0].getBoundingClientRect(); 322 | return { 323 | top: elRect.top - containerRect.top + $container.scrollTop(), 324 | left: elRect.left - containerRect.left + $container.scrollLeft(), 325 | width: elRect.width, 326 | height: elRect.height 327 | }; 328 | }, 329 | refreshPosition: function () { 330 | var self = this, $dialog = self.$element, pos = self.getPosition(), position, 331 | actualWidth = $dialog[0].offsetWidth, actualHeight = $dialog[0].offsetHeight, 332 | placement = self.getPlacement(); 333 | switch (placement) { 334 | case 'bottom': 335 | position = {top: pos.top + pos.height, left: pos.left + pos.width / 2 - actualWidth / 2}; 336 | break; 337 | case 'bottom bottom-left': 338 | position = {top: pos.top + pos.height, left: pos.left}; 339 | break; 340 | case 'bottom bottom-right': 341 | position = {top: pos.top + pos.height, left: pos.left + pos.width - actualWidth}; 342 | break; 343 | case 'top': 344 | position = {top: pos.top - actualHeight, left: pos.left + pos.width / 2 - actualWidth / 2}; 345 | break; 346 | case 'top top-left': 347 | position = {top: pos.top - actualHeight, left: pos.left}; 348 | break; 349 | case 'top top-right': 350 | position = {top: pos.top - actualHeight, left: pos.left + pos.width - actualWidth}; 351 | break; 352 | case 'left': 353 | position = {top: pos.top + pos.height / 2 - actualHeight / 2, left: pos.left - actualWidth}; 354 | break; 355 | case 'left left-top': 356 | position = {top: pos.top, left: pos.left - actualWidth}; 357 | break; 358 | case 'left left-bottom': 359 | position = {top: pos.top + pos.height - actualHeight, left: pos.left - actualWidth}; 360 | break; 361 | case 'right': 362 | position = {top: pos.top + pos.height / 2 - actualHeight / 2, left: pos.left + pos.width}; 363 | break; 364 | case 'right right-top': 365 | position = {top: pos.top, left: pos.left + pos.width}; 366 | break; 367 | case 'right right-bottom': 368 | position = {top: pos.top + pos.height - actualHeight, left: pos.left + pos.width}; 369 | break; 370 | default: 371 | $h.kvLog("Invalid popover placement '" + placement + "'."); 372 | } 373 | $dialog.removeClass('bottom top left right bottom-left top-left bottom-right top-right ' + 374 | 'left-bottom left-top right-bottom right-top').css(position).addClass(placement + ' in'); 375 | }, 376 | validateOpenPopovers: function () { 377 | var self = this, $dialog = self.$element; 378 | if (!self.options.closeOpenPopovers) { 379 | return; 380 | } 381 | self.$body.find('.popover:visible').each(function () { 382 | var $popover = $(this); 383 | if (!$popover.is($dialog)) { 384 | $popover.popoverX('hide'); 385 | } 386 | }); 387 | }, 388 | hide: function () { 389 | var self = this, $dialog = self.$element; 390 | self.$body.removeClass('popover-x-body'); 391 | $dialog.removeClass('kv-popover-active'); 392 | $dialog.modal('hide'); 393 | $dialog.insertBefore(self.$marker); 394 | }, 395 | show: function (skipValidation) { 396 | var self = this, $dialog = self.$element; 397 | $dialog.addClass('kv-popover-active'); 398 | $dialog.css(self.options.dialogCss).appendTo(self.$body); 399 | if (!skipValidation) { 400 | self.validateOpenPopovers(); 401 | } 402 | 403 | $h.addCss(self.$body, 'popover-x-body'); 404 | $dialog.modal('show'); 405 | self.$body.css({'padding': self.bodyPadding}); 406 | $dialog.css({'padding': 0}); 407 | self.refreshPosition(); 408 | }, 409 | toggle: function () { 410 | var self = this; 411 | if (self.$element.is(':visible')) { 412 | self.hide(); 413 | } else { 414 | self.show(); 415 | } 416 | }, 417 | destroy: function () { 418 | var self = this; 419 | self.$element.modal('dispose').off($h.NAMESPACE); 420 | } 421 | }; 422 | 423 | $.fn.popoverButton = function (option) { 424 | var self = this; 425 | return self.each(function () { 426 | var $this = $(this), data = $this.data('popover-button'), 427 | options = $.extend({}, $.fn.popoverButton.defaults, $this.data(), typeof option === 'object' && option); 428 | if (!data) { 429 | $this.data('popover-button', (data = new PopoverButton(this, options))); 430 | } 431 | if (typeof option === 'string') { 432 | data[option](); 433 | } 434 | }); 435 | }; 436 | 437 | $.fn.popoverX = function (option) { 438 | var self = this; 439 | return self.each(function () { 440 | var $this = $(this), data = $this.data('popover-x'), 441 | options = $.extend({}, $.fn.popoverX.defaults, $this.data(), typeof option === 'object' && option); 442 | if (!options.$target) { 443 | if (data && data.$target) { 444 | options.$target = data.$target; 445 | } else { 446 | options.$target = option.$target || $(option.target); 447 | } 448 | } 449 | if (!data) { 450 | $this.data('popover-x', (data = new PopoverX(this, options))); 451 | } 452 | if (typeof option === 'string') { 453 | data[option](); 454 | } else { 455 | if (options.show) { 456 | data.show(true); 457 | } 458 | } 459 | }); 460 | }; 461 | 462 | $.fn.popoverButton.defaults = {trigger: 'click keyup'}; 463 | $.fn.popoverX.defaults = $.extend(true, {}, { 464 | placement: 'auto', 465 | dialogCss: {top: 0, left: 0, display: 'block', 'z-index': 1065}, 466 | autoPlaceSmallScreen: true, 467 | smallScreenWidth: 640, 468 | closeOpenPopovers: true, 469 | closePopoverOnBlur: true, 470 | // other options below common with bootstrap modal 471 | keyboard: true, 472 | focus: true 473 | }); 474 | $.fn.popoverButton.Constructor = PopoverButton; 475 | $.fn.popoverX.Constructor = PopoverX; 476 | 477 | $(document).ready(function () { 478 | var $btns = $("[data-toggle='popover-x']"); 479 | if ($btns.length) { 480 | $btns.popoverButton(); 481 | } 482 | }); 483 | })); -------------------------------------------------------------------------------- /examples/bs4.html: -------------------------------------------------------------------------------- 1 | 10 | 11 | 12 | 13 | 14 | Krajee JQuery Plugins - © Kartik 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 |
23 |

Bootstrap Popover X Demo BS4.x © Krajee Solutions

24 |
25 |

Popover Placements

26 |
27 |
28 | 29 | 30 | 31 | 32 | 33 |
34 | 35 | 36 | 37 | 38 |
39 | 40 | 41 | 42 | 43 | 44 | 45 |
46 |
47 |

×Title

48 |
49 | Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. 50 |
51 |
52 | 53 |
54 |
55 | 56 | 57 |
58 |
59 |

×Title

60 |
61 | Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. 62 |
63 |
64 | 65 |
66 |
67 | 68 | 69 |
70 |
71 |

×Title

72 |
73 | Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. 74 |
75 |
76 | 77 |
78 |
79 | 80 | 81 |
82 |
83 |

×Title

84 |
85 | Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. 86 |
87 |
88 | 89 |
90 |
91 | 92 | 93 |
94 |
95 |

×Title

96 |
97 | Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. 98 |
99 |
100 | 101 |
102 |
103 | 104 | 105 |
106 |
107 |

×Title

108 |
109 | Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. 110 |
111 |
112 | 113 |
114 |
115 | 116 | 117 |
118 |
119 |

×Title

120 |
121 | Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. 122 |
123 |
124 | 125 |
126 |
127 | 128 | 129 |
130 |
131 |

×Title

132 |
133 | Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. 134 |
135 |
136 | 137 |
138 |
139 | 140 | 141 |
142 |
143 |

×Title

144 |
145 | Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. 146 |
147 |
148 | 149 |
150 |
151 | 152 | 153 |
154 |
155 |

×Title

156 |
157 | Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. 158 |
159 |
160 | 161 |
162 |
163 | 164 | 165 |
166 |
167 |

×Title

168 |
169 | Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. 170 |
171 |
172 | 173 |
174 |
175 | 176 | 177 |
178 |
179 |

×Title

180 |
181 | Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. 182 |
183 |
184 | 185 |
186 |
187 | 188 |
189 | 190 |

Popover Color Styles

191 |
192 |
193 | 194 | 195 | 196 | 197 | 198 | 199 | 200 | 201 | 202 |
203 |
204 |

×Title

205 |
206 | Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. 207 |
208 |
209 | 210 | 211 |
212 |
213 |

×Title

214 |
215 | Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. 216 |
217 |
218 | 219 | 220 |
221 |
222 |

×Title

223 |
224 | Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. 225 |
226 |
227 | 228 | 229 |
230 |
231 |

×Title

232 |
233 | Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. 234 |
235 |
236 | 237 | 238 |
239 |
240 |

×Title

241 |
242 | Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. 243 |
244 |
245 | 246 | 247 |
248 |
249 |

×Title

250 |
251 | Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. 252 |
253 |
254 |
255 | 256 |

PopoverX Inside Modal

257 |
258 | 259 | 260 | 263 | 264 | 265 | 302 |
303 | 304 | 313 | -------------------------------------------------------------------------------- /examples/bs5.html: -------------------------------------------------------------------------------- 1 | 10 | 11 | 12 | 13 | 14 | Krajee JQuery Plugins - © Kartik 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 |
23 |

Bootstrap Popover X Demo BS5.x © Krajee Solutions

24 |
25 |

Popover Placements

26 |
27 |
28 | 29 | 30 | 31 | 32 | 33 |
34 | 35 | 36 | 37 | 38 |
39 | 40 | 41 | 42 | 43 | 44 | 45 |
46 |
47 |

×Title

48 |
49 | Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. 50 |
51 |
52 | 53 |
54 |
55 | 56 | 57 |
58 |
59 |

×Title

60 |
61 | Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. 62 |
63 |
64 | 65 |
66 |
67 | 68 | 69 |
70 |
71 |

×Title

72 |
73 | Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. 74 |
75 |
76 | 77 |
78 |
79 | 80 | 81 |
82 |
83 |

×Title

84 |
85 | Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. 86 |
87 |
88 | 89 |
90 |
91 | 92 | 93 |
94 |
95 |

×Title

96 |
97 | Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. 98 |
99 |
100 | 101 |
102 |
103 | 104 | 105 |
106 |
107 |

×Title

108 |
109 | Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. 110 |
111 |
112 | 113 |
114 |
115 | 116 | 117 |
118 |
119 |

×Title

120 |
121 | Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. 122 |
123 |
124 | 125 |
126 |
127 | 128 | 129 |
130 |
131 |

×Title

132 |
133 | Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. 134 |
135 |
136 | 137 |
138 |
139 | 140 | 141 |
142 |
143 |

×Title

144 |
145 | Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. 146 |
147 |
148 | 149 |
150 |
151 | 152 | 153 |
154 |
155 |

×Title

156 |
157 | Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. 158 |
159 |
160 | 161 |
162 |
163 | 164 | 165 |
166 |
167 |

×Title

168 |
169 | Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. 170 |
171 |
172 | 173 |
174 |
175 | 176 | 177 |
178 |
179 |

×Title

180 |
181 | Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. 182 |
183 |
184 | 185 |
186 |
187 | 188 |
189 | 190 |

Popover Color Styles

191 |
192 |
193 | 194 | 195 | 196 | 197 | 198 | 199 | 200 | 201 | 202 |
203 |
204 |

×Title

205 |
206 | Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. 207 |
208 |
209 | 210 | 211 |
212 |
213 |

×Title

214 |
215 | Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. 216 |
217 |
218 | 219 | 220 |
221 |
222 |

×Title

223 |
224 | Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. 225 |
226 |
227 | 228 | 229 |
230 |
231 |

×Title

232 |
233 | Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. 234 |
235 |
236 | 237 | 238 |
239 |
240 |

×Title

241 |
242 | Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. 243 |
244 |
245 | 246 | 247 |
248 |
249 |

×Title

250 |
251 | Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. 252 |
253 |
254 |
255 | 256 |

PopoverX Inside Modal

257 |
258 | 259 | 260 | 263 | 264 | 265 | 302 |
303 | 304 | 313 | -------------------------------------------------------------------------------- /examples/bs3.html: -------------------------------------------------------------------------------- 1 | 10 | 11 | 12 | 13 | 14 | Krajee JQuery Plugins - © Kartik 15 | 16 | 17 | 18 | 19 | 20 | 23 | 24 | 25 |
26 |

Bootstrap Popover X Demo BS3.x © Krajee Solutions

27 |
28 |

Popover Placements

29 |
30 |
31 | 32 | 33 | 34 | 35 | 36 |
37 | 38 | 39 | 40 | 41 |
42 | 43 | 44 | 45 | 46 | 47 | 48 |
49 |
50 |

×Title

51 |
52 | Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. 53 |
54 |
55 | 56 |
57 |
58 | 59 | 60 |
61 |
62 |

×Title

63 |
64 | Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. 65 |
66 |
67 | 68 |
69 |
70 | 71 | 72 |
73 |
74 |

×Title

75 |
76 | Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. 77 |
78 |
79 | 80 |
81 |
82 | 83 | 84 |
85 |
86 |

×Title

87 |
88 | Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. 89 |
90 |
91 | 92 |
93 |
94 | 95 | 96 |
97 |
98 |

×Title

99 |
100 | Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. 101 |
102 |
103 | 104 |
105 |
106 | 107 | 108 |
109 |
110 |

×Title

111 |
112 | Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. 113 |
114 |
115 | 116 |
117 |
118 | 119 | 120 |
121 |
122 |

×Title

123 |
124 | Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. 125 |
126 |
127 | 128 |
129 |
130 | 131 | 132 |
133 |
134 |

×Title

135 |
136 | Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. 137 |
138 |
139 | 140 |
141 |
142 | 143 | 144 |
145 |
146 |

×Title

147 |
148 | Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. 149 |
150 |
151 | 152 |
153 |
154 | 155 | 156 |
157 |
158 |

×Title

159 |
160 | Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. 161 |
162 |
163 | 164 |
165 |
166 | 167 | 168 |
169 |
170 |

×Title

171 |
172 | Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. 173 |
174 |
175 | 176 |
177 |
178 | 179 | 180 |
181 |
182 |

×Title

183 |
184 | Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. 185 |
186 |
187 | 188 |
189 |
190 | 191 |
192 | 193 |

Popover Color Styles

194 |
195 |
196 | 197 | 198 | 199 | 200 | 201 | 202 | 203 | 204 | 205 |
206 |
207 |

×Title

208 |
209 | Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. 210 |
211 |
212 | 213 | 214 |
215 |
216 |

×Title

217 |
218 | Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. 219 |
220 |
221 | 222 | 223 |
224 |
225 |

×Title

226 |
227 | Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. 228 |
229 |
230 | 231 | 232 |
233 |
234 |

×Title

235 |
236 | Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. 237 |
238 |
239 | 240 | 241 |
242 |
243 |

×Title

244 |
245 | Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. 246 |
247 |
248 | 249 | 250 |
251 |
252 |

×Title

253 |
254 | Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. 255 |
256 |
257 |
258 | 259 |

PopoverX Inside Modal

260 |
261 | 262 | 263 | 266 | 267 | 268 | 305 |
306 | 307 | 316 | --------------------------------------------------------------------------------