kartik-v / bootstrap-popover-x

Bootstrap popover extended with modal properties and more.

Hi 👋, I'm Kartik Visweswaran

A passionate open source contributor from India

🔭 I’m currently working on Javascript Plugins and Yii2 Extensions 👨‍💻 All of my projects are available at https://krajee.com 📝 Check out my articles on web tips and my blog 💬 Ask me about anything on app development 📫 How to reach me: https://krajee.com/contact

Support

bootstrap-popover-x's Issues

Modal padding fix for BS ver 3.3.1

Enhancements to support Bootstrap v4.x framework

If target is in a bootstrap grid, the popover positioning will be off...

<div class="row">
    <div class="col-sm-4">column 1</div>
    <div class="col-sm-4">column 2</div>
    <div class="col-sm-4"><button id="button1" class="btn btn-primary btn-lg">Bottom</button></div>
</div>

When I place a button to the rightmost column, and the popover position will be way off...
Any suggestion?

Code enhancements for jQuery 3.x

Add eight additional placement positions

Enhancement to script and css - to add ability to configure eight additional placement positions in addition to the existing 4 placement options. With this enhancement, the popover will support these placement options:

• right
• left
• top
• bottom
• top-left
• top-right
• bottom-left
• bottom-right
• left-top
• left-bottom
• right-top
• right-bottom

Correct android keyboard disappearing issue in popover-x embedded inputs

Rebind widget after ajax reload

Hello, Kartik!
After reload page with ajax widget popover, of course, not active.. How i can re-init popover widget after ajax reload? I have tried re-bind it again like that:

$('#popover').popover();

But this is wrong.. What the right way with your widget?

IsBs(5) check always returns TRUE

Value of input parameter is immediately rewriten in next line, so the result of comparison is eventually always true.

bootstrap-popover-x/js/bootstrap-popover-x.js

Line 52 in 341ac72

var ver = $.fn.popoverXBsVersion;

Enhance ability to register plugin via javascript

• A new plugin PopoverButton will be implemented
• This will allow one to register PopoverX on a toggle button dynamically via javascript without using the data attributes OR . For example:

$('#tog-btn').popoverButton({
   // add plugin options for popoverX which #tog-btn will trigger
});

Correct arrow CSS styles

Refactor code for bootstrap v3.3.4

Refactor code for bootstrap v3.3.4

Enhancements to support Bootstrap v5.x

The page scrolled to top in IE

Hi

When I open the sample (index.html) that is in project with IE (in this case is version 11),
when I click in a button with popover, the page is scrolled to top.
This is normal?

Best regards.

cannot read the textbox of text input value

I cannot read the text property of textbox or value of text input if they are within the class popover-body
popoverx issue.txt

within the

               <div class="popover-body popover-content">
                        <div class="form-group" dir="ltr">
                            <asp:TextBox ID="txtrecepemail" runat="server" CssClass="form-control" TextMode="Email></asp:TextBox>
                        </div>
                    </div>

Impossible to init in javascript

Hello,

After looking for so many hours to all the documentation available, it is impossible to me to init the plugin with the .popoverX() function.

Here'is my code

<!-- jQuery -->
<script src="bower_components/jquery/jquery.min.js"></script>
<!-- external javascript -->
<script src="js/bootstrap.js"></script>
<script src="js/bootstrap-popover-x.js" type="text/javascript"></script>

<button class="btn btn-primary" data-toggle="popover-x" data-target="#myPopover1" data-placement="top">Top</button>
<div id="myPopover1" class="popover popover-default">
    <div class="arrow"></div>
    <div class="popover-title"><span class="close pull-right" data-dismiss="popover-x">&times;</span>Title</div>
    <div class="popover-content">
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
    </div>
</div>

<script type="text/javascript">
    $("#myPopover1").popoverX();
</script>

And the error i have
Uncaught TypeError: Cannot read property '$target' of undefined, line 120 of your js

if i use the following code

<script type="text/javascript">
    $("#myPopover1").popoverX("show");
</script>

I have the following error
Uncaught TypeError: Cannot read property 'offsetWidth' of undefined, line 52 of your js

Not able to make it work for dynamic markup generation scenario

Hello,

$('[data-toggle="popover-x"]') is registered with click and keyup functions as part of document ready event. But in the scenarios where the html mark up is dynamically generated (I am using handlebars as template engine to generate the markup), this design is not working. Any suggestions?

Can we provide these registration methods as seperate methods that we can call after HTML Mark up is attached to the dom objects?

Srinivas.

Some elements jump to left when popover is activated

Prerequisites

• I have searched for similar issues in both open and closed tickets and cannot find a duplicate.
• The issue still exists against the latest master branch of bootstrap-popover-x.
• This is not an usage question. I confirm having read the plugin documentation and demos.
• This is not a general programming / coding question. (Those should be directed to the webtips Q & A forum).
• I have attempted to find the simplest possible steps to reproduce the issue.
• I have included a failing test as a pull request (Optional).

Steps to reproduce the issue

1. Go to Usage section in Popover-x demo page.
2. Click any example.
3. Top-right corner items jump to left when popover is activated.

To problem seems to affect elements that have fixed position and when scroll bar is thick enough.

Expected behavior and actual behavior

Top-right corner elements jump to left when popover is activated but they shouldn't jump.

In comparison, in plugin page similar behaviour does not happen.

Environment

Browsers

• Google Chrome
• Mozilla Firefox
• Internet Explorer
• Safari

Operating System

• Windows
• Mac OS X
• Linux
• Mobile

Libraries

• jQuery version:
• bootstrap-popover-x version:

Isolating the problem

• This bug happens on the plugin demos page
• The bug happens consistently across all tested browsers
• This bug happens when using bootstrap-popover-x without other plugins
• I can reproduce this bug in a jsbin

Popover is not getting shown in correct position

I have the default placement of right, but the popover is getting shown way above and more left of the actual element. I don't have it inside the same div as the button, although when I do, it shows it in the correct place, but is completely squished because it is trying to constrain it to the col-sm-2 I am using.

Popover closes if using Select2 on clicks if using multiple=true

(I have also created a Ticket on the Kartik-Editable github as I first thought it is an issue with that. But after investigating it, it turns out to be an issue with bootstrap-popover-x.js instead.)

Prerequisites

• I have searched for similar issues in both open and closed tickets and cannot find a duplicate.
• The issue still exists against the latest master branch of bootstrap-popover-x.
• This is not an usage question. I confirm having read the plugin documentation and demos.
• This is not a general programming / coding question. (Those should be directed to the webtips Q & A forum).
• I have attempted to find the simplest possible steps to reproduce the issue.
• I have included a failing test as a pull request (Optional).

Steps to reproduce the issue

1. Create a popup with a Select2 Element inside (using Kartik-Editable)
2. Use the Select2 as Mutiple Choice
3. Select one or more tag and then remove one tag -> Popup closes
4. OR: click on toggle all button to select-all or unselect-all ->Popup closes

Expected behavior and actual behavior

Popup should stay opem

When I follow those steps, I see...
Popop closes

Environment

Browsers

• Google Chrome
• Mozilla Firefox
• Internet Explorer
• Safari

Operating System

• Windows
• Mac OS X
• Linux
• Mobile

Libraries

• jQuery version: Latest
• bootstrap-popover-x version: Latest

Isolating the problem

• This bug happens on the plugin demos page
• The bug happens consistently across all tested browsers
• This bug happens when using bootstrap-popover-x without other plugins
• I can reproduce this bug in a jsbin

I have identified where the issue lies:
Inside bootstrap-popover-x.js line 212:

        if (opts.closePopoverOnBlur) {
            $(document).on('click', function (e) {
                var $clicked = $(e.target);
                if ($clicked.closest('[data-toggle="popover-x"]').length) {
                    return;
                } else if ($clicked.closest('.popover-x').length) {
                    e.stopPropagation();
                } else {
                    $('.popover-x:visible').popoverX('hide');
                }
            });
        }

As the tags in the select2 are dynamically added (same for toggle-all button), they are somehow not showing .popover-x as a parent when using the jquery closest.(). Even that looking at the DOM in the browser they clearly are children.
Is there a workaroud for this?

Thanks,
gb5256

Add ability to set `trigger` events other than click for popover button

Extension and enhancement to #24

• New trigger property (string) added for PopoverButton that will control how the popoverX is triggered. Defaults to click keyup. The keyup will only fire on enter key press.
• Should be one of click, keyup, hover, focus, manual. You may pass multiple triggers and separate them with a space. The trigger manual cannot be combined with any other trigger.

Error when calling .popoverX('hide') or .popoverX('show') on hover

Issue when triggering via hover, I get Uncaught TypeError: Cannot read property 'offsetWidth' of undefined unless I am not calling it correctly. Here is the code I am using.
html

<!-- caller -->
<div class="events">
    <div class="event fav-even">
        <a data-toggle="popover-x" data-target="#popover1" data-placement="top" >
                        Some text
        </a>
    </div>
</div>
<!-- end of caller -->
<!-- popover container -->
<div id="popover1" class="popover popover-default">
    <div class="arrow"></div>     
      <div class="popover-content">
        <div class="close-popover">
            <i class="fa fa-times"></i>
        </div>
        <div class="col-xs-5">
            <div>
                <img src="../images/wcc3/thumbs/image.jpg">
            </div>
            <div>
                <i class="fa fa-heart"></i> 
<i class="fa fa-bell"></i> 
<i class="fa fa-calendar"></i>
            </div>
        </div>
        <div class="col-xs-7">
            <div class="title">
                Some text
            </div>          
            <div class="subtitle">SubTitle<br>
                Some more txt</div>
            <div class="popover-description">
                some description !
            </div>
        </div>
        <div class="clearfix"></div>
        <button type="button" class="btn btn-success">BUY TICKET NOW!</button>        
    </div>   
</div>
<!-- end of popover container -->

jquery

$('.event').hover(function(){
    $this = $(this);
    var target = $this.find('a').attr('data-target');
        $(target).popoverX('show');
    }, function(){
        $(target).popoverX('hide');
});

If a call it via click() the popover fires correctly.
please advice thanks!

Allow scrolling of the page body after popover is shown

Enhancements to popover-x to work effectively with bootstrap modals

• Enhance default z-index (to 1065) to allow popover-x dialogs to be embedded in bootstrap modal dialogs
• Always disable modal backdrop for popover-x dialogs to prevent conflict of backdrop appearance with bootstrap modals

Enhance popover-x to be initialized effectively via custom JS

Popover-x can be initialized separately via custom javascript using the popoverButton plugin

$('#myCustomButton').popoverButton({
    target: '#myCustomDialog',
    placement: 'auto'
});

Add `img` folder and indicator for the `popover-loading` css style

Uncaught TypeError: a.indexOf is not a function

jquery .load function used in PopoverX.prototype is deprecated, should to be replaced with .on("load")

click event does not fire on mobile devices

When using bootstrap-popover-x on a mobile device then the click event does not fire.

Could we add a larger size?

Could we add another size? The largest ('lg') is too small in many cases.

I propose: 'xl' - Extra Large - 640px

CSS:

.popover-xl {
    min-width: 640px;
}

Auto-close other popovers with new property `closeOtherPopovers`

Wrong eventlistener in popoverx js

I'm using the yii2 popoverx widget with pjax, and when the view is reloading, the popoverx doesn't working, because the eventlisteners is wrong...
So here the solution:
Old script:

    $(document).ready(function () {
        $("[data-toggle='popover-x']").on('click', function (e) {
            var $this = $(this), href = $this.attr('href'),
                $dialog = $($this.attr('data-target') || (href && href.replace(/.*(?=#[^\s]+$)/, ''))), //strip for ie7
                option = $dialog.data('popover-x') ? 'toggle' : $.extend({remote: !/#/.test(href) && href},
                    $dialog.data(), $this.data());
            e.preventDefault();
            $dialog.trigger('click.target.popoverX');
            if (option !== 'toggle') {
                option.$target = $this;
                $dialog
                    .popoverX(option)
                    .popoverX('show')
                    .on('hide', function () {
                        $this.focus();
                    });
            }
            else {
                $dialog
                    .popoverX(option)
                    .on('hide', function () {
                        $this.focus();
                    });
            }
        });

        $('[data-toggle="popover-x"]').on('keyup', function (e) {
            var $this = $(this), href = $this.attr('href'),
                $dialog = $($this.attr('data-target') || (href && href.replace(/.*(?=#[^\s]+$)/, ''))); //strip for ie7
            if ($dialog && e.which === 27) {
                $dialog.trigger('keyup.target.popoverX');
                $dialog.popoverX('hide');
            }
        });
    });

New script:

    $(document).ready(function () {
        $(document).on('click', '[data-toggle="popover-x"]', function (e) {
            var $this = $(this), href = $this.attr('href'),
                $dialog = $($this.attr('data-target') || (href && href.replace(/.*(?=#[^\s]+$)/, ''))), //strip for ie7
                option = $dialog.data('popover-x') ? 'toggle' : $.extend({remote: !/#/.test(href) && href},
                    $dialog.data(), $this.data());
            e.preventDefault();
            $dialog.trigger('click.target.popoverX');
            if (option !== 'toggle') {
                option.$target = $this;
                $dialog
                    .popoverX(option)
                    .popoverX('show')
                    .on('hide', function () {
                        $this.focus();
                    });
            }
            else {
                $dialog
                    .popoverX(option)
                    .on('hide', function () {
                        $this.focus();
                    });
            }
        });

        $(document).on('keyup', '[data-toggle="popover-x"]', function (e) {
            var $this = $(this), href = $this.attr('href'),
                $dialog = $($this.attr('data-target') || (href && href.replace(/.*(?=#[^\s]+$)/, ''))); //strip for ie7
            if ($dialog && e.which === 27) {
                $dialog.trigger('keyup.target.popoverX');
                $dialog.popoverX('hide');
            }
        });
    });

The only change is 2 row:
-- $("[data-toggle='popover-x']").on('click', function (e) {
++ $(document).on('click', '[data-toggle="popover-x"]', function (e) {

-- $('[data-toggle="popover-x"]').on('keyup', function (e) {
++ $(document).on('keyup', '[data-toggle="popover-x"]', function (e) {

Please fix it, because I love this script, but now I can't use that :(

Fix and correct jQuery deprecated methods

To support upcoming jQuery 4.0 - replace deprecated methods.

Bug when calling from jquery?

I get this error in console

Uncaught TypeError: Cannot read property 'offsetWidth' of undefined

$('#myPopover1').popoverX({
closeOtherPopovers: false
});

Any config options causes this error. Any ideas?

On the demo webpage, page moves when widget is clicked

Prerequisites

• I have searched for similar issues in both open and closed tickets and cannot find a duplicate.
• The issue still exists against the latest master branch of bootstrap-popover-x.
• This is not an usage question. I confirm having read the plugin documentation and demos.
• This is not a general programming / coding question. (Those should be directed to the webtips Q & A forum).
• I have attempted to find the simplest possible steps to reproduce the issue.
• I have included a failing test as a pull request (Optional).

Steps to reproduce the issue

Go to https://plugins.krajee.com/popover-x/demo and click on the first widget
The page moves down

Environment

Browsers

• Google Chrome
• Mozilla Firefox
• Internet Explorer
• Safari

Operating System

• Windows
• Mac OS X
• Linux
• Mobile

Libraries

• jQuery version:
• bootstrap-popover-x version:

Isolating the problem

• This bug happens on the plugin demos page
• The bug happens consistently across all tested browsers
• This bug happens when using bootstrap-popover-x without other plugins
• I can reproduce this bug in a jsbin

---

Want to back this issue? Post a bounty on it! We accept bounties via Bountysource.

Cannot read property 'offsetWidth' of undefined

Hi!

When popover appears in console I have the next error:
Uncaught TypeError: Cannot read property 'offsetWidth' of undefined
The stack trace:

$.extend.getPosition @ bootstrap-popover-x.js:40
$.extend.refreshPosition @ bootstrap-popover-x.js:45
$.extend.show @ bootstrap-popover-x.js:94
b.toggle @ bootstrap.min.js:263
(anonymous function) @ bootstrap-popover-x.js:118
jQuery.extend.each @ jquery.js:374
jQuery.fn.jQuery.each @ jquery.js:139
$.fn.popoverX @ bootstrap-popover-x.js:102
(anonymous function) @ bootstrap-popover-x.js:149
jQuery.event.dispatch @ jquery.js:4435
jQuery.event.add.elemData.handle @ jquery.js:4121

"DIV IS" problem

Hello Kartik!
I have strange problem with your widget, which happen after move to production server.
Under div with popover, i see:
<div is="[object Object]"></div>

Widget still working, but my layout is destroyed, particularly on mobile devices.
In develop server i don`t have this div and i cant determine from where this div appeared.. I check versions in composer, they are same.. I can not imagine where it came from. Any suggestions?

Implement reusable constructor for extending plugin if needed

Will be great if add auto placement feature...

I think auto placement is very useful feature,
please consider to add it to bootstrap-popover-x.

I try to get auto placement from @sandywalker
https://github.com/sandywalker/webui-popover

it seems works.
master...oimken:test

TypeError: undefined is not an object (evaluating '$el[0].getBoundingClientRect')

Hi Kartik,

let me show you a column of a grid in my code ant tell when i get the error:

As you see is an EditableColumn with an INPUT_TIME ("kartik-v/yii2-widget-timepicker": "*")

[
     'class' => 'kartik\grid\EditableColumn',
     'hAlign' => 'center',
     'options' => ['style' => ['width' => '10%']],
     'attribute' => 'charging_time',
     'value' => function($model) {
                            return Yii::$app->formatter->asTime($model->charging_time);
     },
     'readonly' => function() {
          return (!in_array(Yii::$app->user->identity->role->id, [1, 3, 4]));
     },
     'refreshGrid' => true,
     'editableOptions'=> [
              'inputType' => \kartik\editable\Editable::INPUT_TIME,
              'formOptions'=>['action' => ['/travels/change-charging-time']],
              'asPopover' => true,
               'options'=> [
                     'pluginOptions' => [
                          'showMeridian' => false,
                           'showSeconds' => false,
                     ]
               ]
      ],
],

I get error every time that a pjax reload is done. So if i edit inline this o others columns, if i order by any column, if i apply any filter to grid, always after pjax reload grid i get this error.

Something is not ok when you have timepicker in your grid, and reload grid through pjax.

Debbuger (safari, but i test with chrome and same problem) says:

TypeError: undefined is not an object (evaluating '$el[0].getBoundingClientRect')
getPosition - bootstrap-popover-x.js: line 222

Thanks a lot in advance!

More intuitive screen placement depending on media size

Hi,
I specify "left" as my position, which displays correctly on wide screen. It would be nice if the popover would auto locate itself when (or as) the screen size shrinks, so it is not offscreen. Or, similarly, a position setting that tries to position the popover in a preferred location (e.g. left), but if there is not enough room to do so, then fall back on auto. Or lastly, allow me to set the position based on device media size. so I can pre-define which position setting to use depending on which @media size is currently active. I read over the docs for the placement and tried some of them but none fit my needs exactly. If I overlooked the answer to this, my early regrets.

Thanks

Prerequisites

• I have searched for similar issues in both open and closed tickets and cannot find a duplicate.
• [X ] The issue still exists against the latest master branch of bootstrap-popover-x.
• [X ] This is not an usage question. I confirm having read the plugin documentation and demos.
• [X ] This is not a general programming / coding question. (Those should be directed to the webtips Q & A forum).
• [X ] I have attempted to find the simplest possible steps to reproduce the issue.
• I have included a failing test as a pull request (Optional).

Steps to reproduce the issue

Expected behavior and actual behavior

When I follow those steps, I see...

I was expecting...

Environment

Browsers

• Google Chrome
• Mozilla Firefox
• Internet Explorer
• Safari

Operating System

• Windows
• Mac OS X
• Linux
• Mobile

Libraries

• jQuery version:
• bootstrap-popover-x version:

Isolating the problem

• This bug happens on the plugin demos page
• The bug happens consistently across all tested browsers
• This bug happens when using bootstrap-popover-x without other plugins
• I can reproduce this bug in a jsbin

The page scrolls to top in IE11

Prerequisites

• I have searched for similar issues in both open and closed tickets and cannot find a duplicate. (dupe was closed by the stale bot w/ no comments)
• The issue still exists against the latest master branch of bootstrap-popover-x.
• This is not an usage question. I confirm having read the plugin documentation and demos.
• This is not a general programming / coding question. (Those should be directed to the webtips Q & A forum).
• I have attempted to find the simplest possible steps to reproduce the issue.
• I have included a failing test as a pull request (Optional).

Steps to reproduce the issue

1. Go to https://plugins.krajee.com/popover-x/demo and click on any of the examples using IE11

Expected behavior and actual behavior

When I follow those steps, I see...
The page jumps to the top

I was expecting...
For the page not to jump

Environment

Browsers

• Google Chrome
• Mozilla Firefox
• Internet Explorer
• Safari

Operating System

• Windows
• Mac OS X
• Linux
• Mobile

Libraries

• jQuery version: 2.2.4
• bootstrap-popover-x version: dev-master

Isolating the problem

• This bug happens on the plugin demos page
• The bug happens consistently across all tested browsers
• This bug happens when using bootstrap-popover-x without other plugins
• I can reproduce this bug in a jsbin

Video showing bug: https://streamable.com/6m8nl

---

Want to back this issue? Post a bounty on it! We accept bounties via Bountysource.