close popover programmatically & only one popover open at the time

[fxck]

is there any way to do these? I would like to have a "x" button inside the popover to close it and I would want all other popover to be closed when I open a new one..

[pkozlowski-opensource]

No, it is not currently possible AFAIK. There is an issue opened for this already:
#590

Let's continue the discussion in #590

[fxck]

neither is currently possible?

[pkozlowski-opensource]

no, I'm afraid not

[fxck]

Darn that's kind of a bummer.. popover without those two features has a very very limited use.

[pkozlowski-opensource]

@fxck If you care about this feature and care about having it in the project we would be happy to accept a pull request (of course one that has test as well as documentation / demo page update). Would be awesome to see your contribution!

[vchatterji]

@fxck Looking at the tooltip code, I was able to achieve single popover functionality and also hide popover on click elsewhere in the body using the following code (I use jQuery as well).

$('body').on('click', function (e) {
   $('*[popover]').each(function () {
                //Only do this for all popovers other than the current one that cause this event
                if (!($(this).is(e.target) || $(this).has(e.target).length > 0) 
                     && $(this).siblings('.popover').length !== 0 
                     && $(this).siblings('.popover').has(e.target).length === 0)                  
                {
                     //Remove the popover element from the DOM          
                     $(this).siblings('.popover').remove();
                     //Set the state of the popover in the scope to reflect this          
                     angular.element(this).scope().tt_isOpen = false;
                }
    });
});

If you want to do it without jQuery and using only angular jQlite, you can try the following code (maybe it could be added to $tooltipProvider.options as popover-mode, like the following:

$tooltipProvider.options(
{
placement: 'top',
animation: true,
popupDelay: 0,
appendToBody: false,
popover-mode:'single'
});

Anyway, here's the non-jQuery version and a working plnkr:

    <script>
      angular.element(document.body).bind('click', function (e) {
        //Find all elements with the popover attribute
        var popups = document.querySelectorAll('*[popover]');
        if(popups) {
          //Go through all of them
          for(var i=0; i<popups.length; i++) {
            //The following is the popover DOM elemet
            var popup = popups[i];
            //The following is the same jQuery lite element
            var popupElement = angular.element(popup);

            var content;
            var arrow;
            if(popupElement.next()) {
              //The following is the content child in the popovers first sibling
              content = popupElement.next()[0].querySelector('.popover-content');
              //The following is the arrow child in the popovers first sibling
              arrow = popupElement.next()[0].querySelector('.arrow');
            }
            //If the following condition is met, then the click does not correspond
            //to a click on the current popover in the loop or its content.
            //So, we can safely remove the current popover's content and set the
            //scope property of the popover
            if(popup != e.target && e.target != content && e.target != arrow) {
              if(popupElement.next().hasClass('popover')) {
                //Remove the popover content
                popupElement.next().remove();
                //Set the scope to reflect this
                popupElement.scope().tt_isOpen = false;
              }
            }
          }
        }
      });
    </script>

You can see the above non-jQuery code live at:
http://plnkr.co/edit/fhsy4V

[clee704]

+1 for the option. I think it's a more natural behavior for popover (in some usecases). In the meantime I will use the hack @vchatterji posted.

[tomoyuki28jp]

+1 for the option.

[msimonc]

to have only one popover open at a time: popover-trigger="focus"

[tmundt]

If using "focus" as trigger the popover window will not remain open. So I think just a simple "focus" won't do if you would like a single popup to show up which will remain open. It should be possible to set focus on the content of the popover to keep it open. Until it looses focus, it should remain open.

What do you think?