QTip and FullCalendar positioning issue

I was recently making an events calendar for a client using FullCalendar 2.4.0 and QTip 2.2.0. While testing it out I came across an issue while switching events.

So I click on an event and the qtip pop up displays. The issue comes up when you use qtips close button on the event details.

Now when I click on another event the qtip pop up shows where I last clicked to close the event details.

Here's the gist of my javascript:

    <script type="text/javascript">
      $(document).ready(function() {
          var tooltip = $('<div/>').qtip({
              id: 'calendar_tip',
              prerender: true,
              content: {
                  text: 'Content Here',
                  title: { 
                    text: 'Title Here',
                    button: true 
                  }
              },
              position: {
                  my: 'bottom center',
                  at: 'top center',
                  target: 'mouse',
                  viewport: $('#calendar'),
                  adjust: {
                      mouse: false,
                      scroll: false
                  }
              },
              show: false,
              hide: false,
              style: 'qtip-bootstrap'
          }).qtip('api');

          $('#calendar').fullCalendar({
              header: {
                  left: 'prev,next today',
                  center: 'title'
              },
              defaultDate: '2016-01-11',
              editable: false,
              eventLimit: true,
              selectable: true,
              selectHelper: true,
              eventClick: function(data, event, view) {
                  tooltip.reposition(event);
                  tooltip.show();
              },
              dayClick: function() { tooltip.hide(); },
              eventResizeStart: function() { tooltip.hide(); },
              eventDragStart: function() { tooltip.hide(); },
              viewDisplay: function() { tooltip.hide(); },
              events: [
                  {
                      title: 'Available',
                      start: '2016-01-04',
                      end: '2016-01-08'
                  },
                  {
                      title: 'Available',
                      start: '2016-01-20',
                      end: '2016-01-22'
                  },
              ]
          }); 
      });
    </script>

Here's where the problem is:

eventClick: function(data, event, view) {
  tooltip.reposition(event);
  tooltip.show();
}

The reposition call isn't correct. I've double checked the event coordinates and they work just fine. So here's how I got around this issue.

eventClick: function(data, event, view) {
  tooltip.set({'position.target': [event.pageX, event.pageY]});
  tooltip.reposition(null, false);
  tooltip.show();
}

I set the position coordinates manually and then call the reposition function again. I call reposition because I want the qtip event to display again without any fancy motions.