CODEWITHSUNDEEP
javascriptjquerytwitter-bootstrap-3bootstrap-popover
Mona Coder
Mona Coder

Reputation: 6316

Popover is not showing on first click after closing it

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.

Upvotes: 5

Views: 3787

Answers (2)

karthic4info
karthic4info

Reputation: 269

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

Upvotes: 0

Shailendra Sharma
Shailendra Sharma

Reputation: 6992

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

Upvotes: 2

Related Questions