연도보기에서 fullcalendar에 대한 툴팁

Question

년보기에서 fullcalendar에 대한 툴팁을 추가하고 싶습니다. 아래에서 시도했지만 월별보기에 툴팁이 추가되었습니다. 나는 구글과 시도했지만 이것과 관련된 것을 찾지 못했다. 연도보기에 툴팁을 추가하는 다른 방법이 있습니까?

eventMouseover: function(calEvent,jsEvent) { 
      xOffset = 10; 
      yOffset = 30; 
      $("body").append(calEvent.tooltip); 
      $("#tooltip") 
       .css("top",(jsEvent.clientY - xOffset) + "px") 
       .css("left",(jsEvent.clientX + yOffset) + "px") 
       .fadeIn("fast"); 
    }, 
    eventMouseout: function(calEvent,jsEvent) { 
     $("#tooltip").remove(); 
    } 

Answer 1

eventMouseover: function(calEvent, jsEvent) { 
    var tooltip = '<div class="tooltipevent" style="width:100px;height:100px;background:#ccc;position:absolute;z-index:10001;">' + calEvent.title + '</div>'; 
    var $tooltip = $(tooltip).appendTo('body'); 

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

eventMouseout: function(calEvent, jsEvent) { 
    $(this).css('z-index', 8); 
    $('.tooltipevent').remove(); 
}, 

Answer 2

1.5 버전, 당신은 qtip 사용할 수 있기 때문에 이벤트에 팁을 표시하기 위해 (나는 또한 기운 사용하지만이 툴팁으로 작동합니다) :

$('#calendar').fullCalendar({ 
    events: [ 
     { 
      title: 'My Event', 
      start: '2010-01-01', 
      description: 'This is a cool event' 
     } 
     // more events here 
    ], 
    eventRender: function(event, element) { 
     element.qtip({ 
      content: event.description 
     }); 
    } 
}); 

문서 소스 : http://arshaw.com/fullcalendar/docs/event_rendering/eventRender/

도움이되기를 바랍니다

Answer 3

툴팁없이 html title 속성을 사용할 수 있습니다. lib :

$('#calendar').fullCalendar({ 
    events: [ 
     { 
      title: 'My Event', 
      start: '2014-01-01', 
      tooltip: 'This is a cool event' 
     } 
     // more events here 
    ], 
    eventRender: function(event, element) { 
     element.attr('title', event.tooltip); 
    } 
}); 

Answer 4

여기에 또 다른 구현

eventMouseover: function(calEvent, jsEvent) { var tooltip = '<div class="tooltipevent" style="width:130px;height:100px;background:#aed0ea;position:absolute;z-index:10001;"> Title: ' + calEvent.title + '</div>'; var $tool = $(tooltip).appendTo('body'); 
$(this).mouseover(function(e) { 
    $(this).css('z-index', 10000); 
      $tool.fadeIn('500'); 
      $tool.fadeTo('10', 1.9); 
}).mousemove(function(e) { 
    $tool.css('top', e.pageY + 10); 
    $tool.css('left', e.pageX + 20); 
}); 
}, 
eventMouseout: function(calEvent, jsEvent) { 
$(this).css('z-index', 8); 
$('.tooltipevent').remove(); 
}, 

---