qtip2: Tooltip always appears in top left corner instead of targeted element

Question

I've tried everything I can think of to get the tooltip by the hovered-over event. But for whatever reason it just appears every time in the top left corner of my browser window.

Here is my javascript:

$(document).ready(function(){
  var tooltip = $('<div/>').qtip({
  id:'myCalendar',
  prerender:true,
  content:{
      text:' ',
      title:{
          button:true,
      },
  },
  position:{
      my:'center left',
      at:'center right',
      target:'mouse',
      viewport:$('#myCalendar'),
      adjust:{
          mouse:false,
          scroll:false,
      },
  },
  show:false,
  hide:false,
  style:'qtip-light',}).qtip('api');

  $('#myCalendar').fullCalendar({
    editable:true,
    eventMouseout:function(e,j,v){
        tooltip.hide();
    },
    eventMouseover:function(e,j,v){
        var event = '<h3>'+e.title+'</h3>';
        tooltip.set({'content.text':event,}).reposition(e).show(e);
    },
    events:[{title:'All Day Event',start:new Date(y,m,1)}],
    header:{left:'prev,next today',center:'title',right:'month,agendaWeek,agendaDay'},
  });
});

I'm using all of the same javascript and css linked from this example on jsfiddle: http://jsfiddle.net/craga89/N78hs/

Can someone spot where I'm going wrong?

Answer 1

I couldn't ever get the code above to work, so I decided to go a different route and use the render event instead. Now it works exactly as I wanted by putting the qtip in the middle of the right side of each fullcalendar event on mouse over.

$(document).ready(function(){
  $('#myCalendar').fullCalendar({
    editable:true,
    eventRender:function(event,element,view){
      element.qtip({
        content:{
        text:'<h3>'+event.title+'</h3>',
      },
      position:{
        my:'center left',
        at:'center right'
      },
      show:'mouseover',
    }); 
  },
  events:[{title:'All Day Event',start:new Date(y,m,1)}],
  header:{left:'prev,next today',center:'title',right:'month,agendaWeek,agendaDay'},
  });
});

I still don't know why using this code works as expected. Note: I didn't change any of the stylesheets or javascript included with either fullcalendar or qtip, just something about how the code above was implemented improperly.