2014-02-25 31 views
0

我想在我的fullcalendar中使用qtip2,但是我遇到了eventMouseout()問題。使用Qtip2的Fullcalendar EventMouseout

當我在附近的事件之間切換時,qtip顯示不正確。

,我使用的代碼是這樣的http://jsfiddle.net/Lknej/1/

eventMouseover: function(data, event, view) { 
      var content = '<h3>'+data.title+'</h3>' + 
       '<p><b>Start:</b> '+data.start+'<br />' + 
       (data.end && '<p><b>End:</b> '+data.end+'</p>' || ''); 

      tooltip.set({ 
       'content.text': content 
      }) 
      .reposition(event).show(event); 
}, 
eventMouseout: function(data, event, view) {tooltip.hide()} 
+1

你能提供我們你的代碼嗎? –

回答

1

這是有關事件得到提示另一種方法

它可以在不qtip2插件來完成, 這裏是我的代碼http://jsfiddle.net/539jx/3/

eventMouseover: function (data, event, view) { 

     tooltip = '<div class="tooltiptopicevent" style="width:auto;height:auto;background:#feb811;position:absolute;z-index:10001;padding:10px 10px 10px 10px ; line-height: 200%;">' + 'title: ' + ': ' + data.title + '</br>' + 'start: ' + ': ' + data.start + '</div>'; 


     $("body").append(tooltip); 
     $(this).mouseover(function (e) { 
      $(this).css('z-index', 10000); 
      $('.tooltiptopicevent').fadeIn('500'); 
      $('.tooltiptopicevent').fadeTo('10', 1.9); 
     }).mousemove(function (e) { 
      $('.tooltiptopicevent').css('top', e.pageY + 10); 
      $('.tooltiptopicevent').css('left', e.pageX + 20); 
     }); 


    }, 
    eventMouseout: function (data, event, view) { 
     $(this).css('z-index', 8); 

     $('.tooltiptopicevent').remove(); 

    } 
0

我解決這個問題的方法如下

eventMouseover: function (data, event, view) { 
     $('#ui-tooltip-0').css("display", "block"); 
     var content = 'Fetcha: <b>' + data.departureDate.split(' ')[0] + '</b> ' + 'Desde: <b>' + data.title + '</b>' + 
       '<p><b>#viaje: ' + data.id + '</b><br /><b>' + $('#ddlEndTerminal option:selected').text().split(',')[0] + ': ' + data.arrivalDate.split(' ')[1] 
      + '</b><br /><b>' + $('#ddlStartTerminal option:selected').text().split(',')[0] + ': ' + data.departureDate.split(' ')[1]; 

     tooltip.set({ 
      'content.text': content 
     }) 
     .reposition(event).show(event); 


    }, 
    eventMouseout: function (data, event, view) { 



     $('#ui-tooltip-0').css("display","none"); 

    },