Bootstrap .popover('show'), .popover('hide') not working. Binding it to click works

Question

I have a button that has been binded to a popover. I would like to hide the popover when someone clicks on one of the smilies in the popover. However, $("#smiley").popover('hide') does not work.

Unfortunately I haven't been able to reproduce this with barebones code - it only happens on the live site, which is https://coinchat.org

Relevant code:

$("#smiley").popover({html: true, trigger: 'click', placement: 'top', content: smileyContent, title: 'Smilies'});

Later in a function..

$("#smiley").popover('hide'); // not working

Answer 1

In https://inputs.io/js/buttons.js the jQuery plugin jQuery.fn.popover is overwritten on a load event of some kind, so $("#smiley").popover("hide") at that point is no longer calling into bootstrap but the plugin provided by inputs.io .

A snippet of the code:

Inputsio.load = function(){
    (function(){(function(e){return e.fn.popover=function(t)

The usage of jQuery plugin namespace for application specific code is extremely distasteful indeed.

A temporary fix could be $("#smiley").click()

Answer 2

here is a working fiddle that is "similar" to your code

http://jsfiddle.net/6hkkk/7/

HTML

<div style="margin-top:100px">
    <span id="smiley" data-title="smile" data-toggle="clickover">
        <i class="icon-comment"></i>
    </span>
</div>

javascript

ClosePop = function () {
    $('#smiley').popover('hide');
}

var elem = '<button data-toggle="clickover" class="btn" onclick="ClosePop();"><i class="icon-off"></i></button>';

$('#smiley').popover({
    animation: true,
    content: elem,
    html: true
});

Answer 3

Replace

$("#smiley").popover('hide');

with

$("#smiley").click();

Works for me in the console.

Answer 4

try to move id="smiley" from

<span class="btn tenpx smileypopover popover-trigger" id="smiley" data-original-title="" title="">

to

<div class="popover fade top in" style="top: 430px; left: 308.5px; display: block;">

Answer 5

Is something like this out of the question?

$('#smileylist a').click(function(){
  if($('.popover').css('display','block')){
    $(this).css('display','none');
  }
});

$('.smileypopover').click(function(){
  if ($('.popover').css('display','none')){
    $(this).css('display','block');
  }
});

When I click on the smiley face it closes the popover, then I can't open it again until I run the 2nd block of code. It's very close but I'm not sure exactly what I'm missing.

Answer 6

If you have a selector property (eg, usually required for dynamic HTML content) in your popover options, be sure to use the same selector when calling the 'hide' method.

The following fails to hide popovers (for new content added to the DOM).

//enable popover
$(document).popover({
  html: true,
  selector: "[data-popover]"
});

//attempt to hide popover
$(document).popover('hide');

Instead, use this:

//enable popover
$(document).popover({
  html: true,
  selector: "[data-popover]"
});

// hide popover
$('[data-popover]').popover('hide');

Answer 7

Bootstrap cannot reach indepentently popover id's. We have to read aria-describedby attribute related with the element.

Code below is solves your issue:

$("#"+$(relatedElementId).attr("aria-describedby")).remove();

relatedElementId: popover's associated element

Answer 8

In the addSmiley function you could replace the

$("#smiley").popover('hide');

with

$(".popover").hide(); 

It would work , but don't know if it is ok for you.