Angularjs – Angular UI Bootstrap Popover adding a close button

angular-ui-bootstrapangularjspopover

I have the following pop-up and trying to add a close button to be able to close it.

.directive("popoverHtmlUnsafePopup", function () {
  'use strict';
  return {
    restrict: "EA",
    replace: true,
    scope: { title: "@", content: "@", placement: "@", animation: "&", isOpen: "&", manualHide: '&' },
    templateUrl: "views/popover/popover-html-unsafe-popup.html"
  };
})

.directive("popoverHtmlUnsafe", [ '$compile', '$timeout', '$parse', '$window',"$tooltip", function ($compile, $timeout, $parse, $window, $tooltip) {
  'use strict';
  return $tooltip("popoverHtmlUnsafe", "popover", "click");
}]);

<div class="popover {{placement}}" ng-class="{ in: isOpen(), fade: animation() }">
  <div class="arrow"></div>

  <div class="popover-inner">
    <h3 class="popover-title" ng-bind="title" ng-show="title"></h3>
    <div class="popover-content" bind-html-unsafe="content">
    </div>
    <button type="button" class="close" popover-trigger="close">&times;</button>
  </div>
</div>

Just not sure what event or function to call on

<button type="button" class="close" popover-trigger="close">&times;</button>

to be able to close the popup

Best Answer

Ran into issue with this on another project using tooltip. I ended up following some of the patterns in Tooltip.js

By using $compile and a new child scope you can customize this popup how ever you see fit.

.directive('popover2',['$parse', '$compile','$log','$templateCache','$position',
    function ($parse,$compile,$log,$templateCache,$position ) {
         function link(scope, element, attrs) {
             var popupScope = scope.$new(false);   
             var html = $templateCache.get('views/popover/popover-html-unsafe-popup.html').trim();
             var template = angular.element(html)

             var popupLinkFn = $compile(template);

             var popup = popupLinkFn(popupScope);

             popupScope.isOpen = false;             
             popupScope.content = attrs['popover2'];
             var position = function(){
                 var ttPosition = $position.positionElements(element, popup, scope.placement, false);
                 ttPosition.top += 'px';
                 ttPosition.left +='px';
                 popup.css(ttPosition);
             };
             popupScope.setOpen = function(val) {                 

                 popupScope.isOpen = val;
                 popup.css({display: popupScope.isOpen ? 'block' :'none' });       
                 position();
                 // call twice, same as tooltip.js
                 position();

             };            

             var cleanup = element.on('click',function(event){   
                popupScope.setOpen(!popupScope.isOpen);
             });

             element.after(popup);
             element.on('$destroy',cleanup);

         }
        return {
            replace:false,            
            link:link,
            scope: {title: "@", placement: "@",},
        }; 
    }
 ]);

JSFiddle

This directive will allow you to show a popup based on a button and then have a close function. You can extend the show logic how ever you see fit. I have used form valid successfully in the past also.

Related Solutions

Twitter-bootstrap – How to dismiss a Twitter Bootstrap popover by clicking outside

Update: A slightly more robust solution: http://jsfiddle.net/mattdlockyer/C5GBU/72/

For buttons containing text only:

$('body').on('click', function (e) {
    //did not click a popover toggle or popover
    if ($(e.target).data('toggle') !== 'popover'
        && $(e.target).parents('.popover.in').length === 0) { 
        $('[data-toggle="popover"]').popover('hide');
    }
});

For buttons containing icons use (this code has a bug in Bootstrap 3.3.6, see the fix below in this answer)

$('body').on('click', function (e) {
        //did not click a popover toggle, or icon in popover toggle, or popover
        if ($(e.target).data('toggle') !== 'popover'
            && $(e.target).parents('[data-toggle="popover"]').length === 0
            && $(e.target).parents('.popover.in').length === 0) { 
            $('[data-toggle="popover"]').popover('hide');
        }
    });

For JS Generated Popovers Use '[data-original-title]' in place of '[data-toggle="popover"]'

Caveat: The solution above allows multiple popovers to be open at once.

One popover at a time please:

Update: Bootstrap 3.0.x, see code or fiddle http://jsfiddle.net/mattdlockyer/C5GBU/2/

$('body').on('click', function (e) {
    $('[data-toggle="popover"]').each(function () {
        //the 'is' for buttons that trigger popups
        //the 'has' for icons within a button that triggers a popup
        if (!$(this).is(e.target) && $(this).has(e.target).length === 0 && $('.popover').has(e.target).length === 0) {
            $(this).popover('hide');
        }
    });
});

This handles closing of popovers already open and not clicked on or their links have not been clicked.

Update: Bootstrap 3.3.6, see fiddle

Fixes issue where after closing, takes 2 clicks to re-open

$(document).on('click', function (e) {
    $('[data-toggle="popover"],[data-original-title]').each(function () {
        //the 'is' for buttons that trigger popups
        //the 'has' for icons within a button that triggers a popup
        if (!$(this).is(e.target) && $(this).has(e.target).length === 0 && $('.popover').has(e.target).length === 0) {                
            (($(this).popover('hide').data('bs.popover')||{}).inState||{}).click = false  // fix for BS 3.3.6
        }

    });
});

Update: Using the conditional of the previous improvement, this solution was achieved. Fix the problem of double click and ghost popover:

$(document).on("shown.bs.popover",'[data-toggle="popover"]', function(){
    $(this).attr('someattr','1');
});
$(document).on("hidden.bs.popover",'[data-toggle="popover"]', function(){
    $(this).attr('someattr','0');
});
$(document).on('click', function (e) {
    $('[data-toggle="popover"],[data-original-title]').each(function () {
        //the 'is' for buttons that trigger popups
        //the 'has' for icons within a button that triggers a popup
        if (!$(this).is(e.target) && $(this).has(e.target).length === 0 && $('.popover').has(e.target).length === 0) {
            if($(this).attr('someattr')=="1"){
                $(this).popover("toggle");
            }
        }
    });
});

HTML inside Twitter Bootstrap popover

You cannot use <li href="#" since it belongs to <a href="#" that's why it wasn't working, change it and it's all good.

Here is working JSFiddle which shows you how to create bootstrap popover.

Relevant parts of the code is below:

HTML:

<!-- 
Note: Popover content is read from "data-content" and "title" tags.
-->
<a tabindex="0"
   class="btn btn-lg btn-primary" 
   role="button" 
   data-html="true" 
   data-toggle="popover" 
   data-trigger="focus" 
   title="<b>Example popover</b> - title" 
   data-content="<div><b>Example popover</b> - content</div>">Example popover</a>

JavaScript:

$(function(){
    // Enables popover
    $("[data-toggle=popover]").popover();
});

And by the way, you always need at least $("[data-toggle=popover]").popover(); to enable the popover. But in place of data-toggle="popover" you can also use id="my-popover" or class="my-popover". Just remember to enable them using e.g: $("#my-popover").popover(); in those cases.

Here is the link to the complete spec: Bootstrap Popover

Bonus:

If for some reason you don't like or cannot read content of a popup from the data-content and title tags. You can also use e.g. hidden divs and a bit more JavaScript. Here is an example about that.

Best Answer

Related Solutions

Twitter-bootstrap – How to dismiss a Twitter Bootstrap popover by clicking outside

HTML inside Twitter Bootstrap popover

Related Topic