Show one popover and hide other popovers

Question

i have several buttons and i need a popover for each.
i want it like this:
when my user click on one of them, i want others to be hidden. so only one popover is show

Answer 1

I went for a combinations of approaches I've seen both on this thread and others. My requirements specify that:

• Only one popover should be visible at a time
• A click anywhere outside the popover should dismiss the popover
• The popover should contain a control

• Should not require rebinding the popover event

      function bindEvents() {
  
           setupPopupBinding();
  
           setupPopupDismissal();
      };
  
      function setupPopupBinding() {
             $('.addSectionItem').popover({
                    html: true,
                    content: function () {
                          return createDropdowns($(this).data('sectionid'))[0].outerHTML;
                    },
                    placement: "right",
                    trigger: "click focus"
             }).on("inserted.bs.popover", function (e) {
                  //initialize dropdown
                  setupSelect2();
             }).on("hide.bs.popover", function (e) {
                   $('.select2-container--open').remove();
             });
      }
  
      function setupPopupDismissal() {
             $('body:not(.addSectionItem)').on('click', function (e) {
             $('.addSectionItem').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');
             $('.popover').has(e.target).remove();
          }
      });
      });
      }
  
      function createDropdowns(sectionId: number) {
             var dropdown = $('
  ')
             .attr('Id', 'sectionPopupWrapper' + sectionId)
             .addClass('popupWrapper')
             .append($('').addClass('sectionPopup'))
             .append($('').addClass('btn btn-primary btn-xs')
             .attr('data-sectionid', sectionId)
             .text('Add'));
  
      return dropdown;
      }
  
  
      
  
               
  
                                                          
              
              
  
                
                  
                  0
                
                     
                  
                 讨论(0)
                
                                                    
                
                
  
                            
               
         
            
                
                                         
  
       查看其它13个回答
  
  
              
                           
  
                      
  
  
  
                 
              
  
      发布评论:
      
  
           
                          
      
      
  提交评论