qtip2：工具提示始终显示在左上角而不是目标元素

Question

我已经尝试了所有我能想到的事情来通过悬停事件来获取工具提示。但无论出于何种原因，它每次都出现在浏览器窗口的左上角。

这是我的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'},
  });
});

我在jsfiddle上使用了这个例子中链接的所有相同的javascript和css： http://jsfiddle.net/craga89/N78hs/

有人可以找到我出错的地方吗？

Answer 1

我无法让上面的代码工作，所以我决定采用不同的路线并改为使用渲染事件。现在它完全按照我想要的方式将qtip放在鼠标悬停的每个fullcalendar事件右侧的中间。

$(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'},
  });
});

我仍然不知道为什么使用此代码按预期工作。注意：我没有更改fullcalendar或qtip中包含的任何样式表或javascript，只是关于上面的代码是如何被不正确地实现的。