Bootstrap: Tooltip/Popover methods show/hide/toggle don't work properly with click triggering

Created on 1 Jul 2015  路  11Comments  路  Source: twbs/bootstrap

After upgrading to version 3.3.5 I have found a couple of issues with popover. Original issue is I need to click twice by trigger element $el if popover was hidden by $el.popover('hide'). You can reproduce it here: https://jsbin.com/bapohu/edit?html,js,output.
It looks like a state is saved into inState by events but not changed by calling of methods. commit

Another issues:
Need twice click by trigger to hide popover after $el.popover('show')

  • Click by [show]
  • Click by [trigger], note the popover is not hidden
  • Click by [trigger] again, the popover is hidden

Opened by trigger the popover cannot be hidden by $el.popover('toggle')

  • Click by [trigger]
  • Click by [toggle], note the popover is not hidden
confirmed js v4

Most helpful comment

You can apply a temporary fix in the hidden event like this:

$('body').on('hidden.bs.popover', function (e) {
    $(e.target).data("bs.popover").inState.click = false;
});

All 11 comments

CC: @redbmk @fat

hm鈥β爓e could just revert @redbmk's commit

...which would re-break #16008.

Maybe manual triggers could reset inState back to its initial settings

You can apply a temporary fix in the hidden event like this:

$('body').on('hidden.bs.popover', function (e) {
    $(e.target).data("bs.popover").inState.click = false;
});

@julesongithub This has been fixed for a while in pull request #17702, but is still waiting on code review.

@whythecode @gregblass Per our issue tracker guidelines, please use GitHub's "reactions" feature instead of posting noisy "+1" comments.

Sigh. This is still an issue in 4.0.

Adapting @julesongithub's patch, one can fix this in 4.0 using:

$('body').on('hidden.bs.popover', function (e) {
    $(e.target).data("bs.popover")._activeTrigger.click = false;
});

Bootstrap 3 is no longer being officially developed or supported.

All work has moved onto our next major release, v4. As such, this issue or pull request is being closed as a "won't fix." For additional help and support, we recommend utilizing our community resources. Thanks for your understanding, and see you on the other side of v4!

<3,
@mdo and team

Reopening since this also has the v4 label.

When you use tooltip custom triggers like click,focus, etc except trigger, bootstrap assigns an event handler once clicked or focused for the first time. Then on the second attempt, the event get's executed. So to avoid this, use this

$(element).popover({"trigger":"manual"}};
Then call the popover using
$(element).popover('show');

Was this page helpful?
0 / 5 - 0 ratings

Related issues

kamov picture kamov  路  3Comments

ghost picture ghost  路  3Comments

iklementiev picture iklementiev  路  3Comments

fohlsom picture fohlsom  路  3Comments

athimannil picture athimannil  路  3Comments