0

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

注意测试工具提示悬停在浏览器的左上角

这是我的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/

有人能发现我哪里出错了吗？

4

1 回答 1

1

我无法让上面的代码工作，所以我决定走一条不同的路线，改用渲染事件。现在它完全按照我的要求工作，将 qtip 放在鼠标悬停时每个完整日历事件的右侧中间。

$(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，只是关于上面的代码是如何不正确地实现的。

于 2013-10-23T14:33:19.667 回答