title: How to open a popover while closing an already open popover at the same time
body: <p>I already have a week-view calendar (using fullcalendar) displaying the events. When clicking an event, a popover shows just like I want it too. However, when I click another event, a new popover opens while the previous popover is still visible. Currently, I have to click on the event again to close the popover. I would like to have the previous popover close automatically once a new popover opens. Is it doable? My codes for displaying the popover is shown below. So far, I've tried a "detection mechanism" to determine if any popovers are visible then close them first before displaying a new one. I have no luck making it work, though. I also can't seem to make the suggestions from other forums (even the ones here on stackoverflow) to work.</p>
  
  <p>//calendar.js</p>
  
  <pre><code>eventClick: function (calEvent, jsEvent, view) {
      var pcontent = "";
      pcontent += "&lt;h5 class=semibold&gt;";
      pcontent += "&lt;img class='mr10' src='images/bloggingservices.png' width='42' height='42' /&gt;";
      pcontent += calEvent.title;
      pcontent += "&lt;/h5&gt;";
      pcontent += "&lt;hr/&gt;";
      pcontent += "&lt;p class=''&gt;&lt;span class='ico-clock'&gt;&lt;/span&gt; Time: ";
      pcontent += $.fullCalendar.moment(calEvent.start).format('hh:mm');
      pcontent += " - ";
      pcontent += $.fullCalendar.moment(calEvent.end).format('hh:mm');
      pcontent += "&lt;/p&gt;";
  
      $('.popover.in').remove(); // adding this line works for me
  
      $(this).popover({
          placement: "bottom",
          html: true,
          trigger: "manual", // I already tried changing the trigger to "focus" but it didn't work
          content: pcontent
      }).popover("toggle");   
  
  
      // $(this).not(this).popover('hide');     
      }
  </code></pre>