Подсказка для полного календарного года в году

Question

Я хочу добавить всплывающую подсказку для полного календаря в виде года. Я пробовал с приведенным ниже, но добавил всплывающую подсказку в месяц. Я попытался с google, но не нашел ничего связанного с этим. Есть ли другой способ добавить всплывающую подсказку в виде года?

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

Вы можете использовать атрибут title html без какой-либо подсказки 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(); 
}, 

---