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

[zandroid]

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

[cvrebert]

CC: @redbmk @fat

[fat]

hm… we could just revert @redbmk's commit

[cvrebert]

...which would re-break #16008.

[redbmk]

Maybe manual triggers could reset inState back to its initial settings

[julesongithub]

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;
});

[redbmk]

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

[cvrebert]

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

[markbao]

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;
});

[mdo]

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

[cvrebert]

Reopening since this also has the v4 label.

[kingsloob1]

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');

[RosalynLP]

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;
});

Just fyi using this fix gave me some problems from within R shiny with the conditional panels I was using elsewhere; it seems that 'hidden.bs.popover' is also triggered when hiding a conditional panel (not sure why as they don't have popover class), but if you set click to false here the content does not always display when the condition is changed. To get around it I added a line checking the class of the target which hides the popover - in this case all my popovers are called by buttons with class 'summary-btn' so I check that before resetting the click state.

$(document).on('hidden.bs.popover', (x) => {
    if($(x.target).attr("class") !== undefined){
        if($(x.target).attr("class").includes("summary-btn")){
            $(x.target).data("bs.popover").inState = { click: false, hover: false, focus: false };
        } 
   }
});