Popover is not showing on first click after closing it

Question

I am working on this demo. I am trying to discover why the popup is not functioning on first click after closing it by .close button.

 $("#pop-One").popover({
        placement: 'right',
        html: 'true',
        title : '<span class="text-info" style=""><strong>Model Type</strong></span>'+
                '<button type="button"  class="btn btn-default close" onclick="$("#pop-One").popover("hide");">×</button>',
        content : '<p class="popup" style="color:#323232;"> \Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry standard dummy text ever since the 1500s,</p>'
    });

@import 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css';
@import 'https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css';
body{padding:20px;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<div class="container">
<button type="button" class="btn btn-default" id="pop-One" data-toggle="popover"><i class="fa fa-question"></i></button>
</div>

For whatever reason, the close button is not working here. I already saw this post but that is a different method.

Possible duplicate of [Twitter bootstrap:Popovers are not showing up on first click but show up on second click](http://stackoverflow.com/questions/12333585/twitter-bootstrappopovers-are-not-showing-up-on-first-click-but-show-up-on-seco) — Shailendra Sharma, Oct 29 '15 at 06:11
Hi Shailendra Sharma, I guess you didn't even take a look at the questions and judging only based on the titles! this is totally different approach than that question! — Mona Coder, Oct 29 '15 at 06:14

score 2 · Accepted Answer · answered Oct 29 '15 at 06:40

2

don't know this is best solution or not but it's working

  $("#pop-One").popover({
        placement: 'right',
        html: 'true',
        title : '<span class="text-info" style=""><strong>Model Type</strong></span>'+
                '<button type="button"  class="btn btn-default close"\
     onclick="$(&quot;#pop-One&quot;).popover(&quot;hide&quot;);">×</button>',
        content : '<p class="popup" style="color:#323232;"> \Lorem Ipsum is simply dummy\ text of the printing and typesetting industry. Lorem Ipsum has been the industry standard\ dummy text ever since the 1500s,</p>'
  }).on('shown.bs.popover', function() {
    var popup = $(this);
    $(this).parent().find("div.popover .close").click(function() {
      popup.click();
    });
  });

here the result of my efforts

answered Oct 29 '15 at 06:40

Shailendra Sharma

6,976
2
28
48

Triggering a click is probably the way to go. The problem earlier is that it was manually hidden when the trigger was set to click. So something went bonkers there. Though now you don't need the ...popover('hide'). Because it's the click trigger that's doing the work. – AccidentallyC Oct 29 '15 at 06:41
i know it's tricky, not a best approach ,but also not worst one – Shailendra Sharma Oct 29 '15 at 06:44
I solved my other bootstrap problem using your solution. it was really helpful... – Ajay Kumar Apr 15 '17 at 06:50

karthic4info · Answer 2 · 2017-05-24T06:31:28.130

  <div id="timepickerDue" class="input-group date mytime activitydateblock" uib-popover-template="'myTooltipTemplate.html'" popover-trigger="'outsideClick'" popover-placement="bottom" popover-class="customClass" popover-is-open="isEnable"></div>
 <div uib-popover-template-popup="" uib-title="" content-exp="contentExp()" origin-scope="origScope" class="popover ng-scope ng-isolate-scope bottom customClass fade in" tooltip-animation-class="fade" uib-tooltip-classes="" ng-class="{ in: isOpen }" style="top: 125px; left: 363px;"><div class="arrow"></div>

Above is the HTML markup of Popover.

Actual problem why it works on double click , not with single click is little tricky one. The reason behind this was bootstrap and angular needs the element click event to register with.

Please use the below code to fix this in ipod. If you intend to use other than touch devices you can use $(document).on('click', function(e) instead of $(document).on('touchstart', function(e)

    $(document).on('touchstart', function(e) {
         if ($("div[uib-popover-template-popup='']").hasClass('popover ng-scope ng-isolate-scope bottom customClass fade in') && $(e.target).closest('div[class^="popover-content"]').length <= 0)
         angular.element('#timepickerDue').triggerHandler('click')
  });

Popover is not showing on first click after closing it

2 Answers2