Tooltip per visualizzazione di fullcalendar in anno

Question

Voglio aggiungere suggerimenti per il calendario completo in visualizzazione annuale. Ho provato con quello sotto, ma ha aggiunto tooltip alla vista mese. Ho provato con google ma non ho trovato nulla relativo a questo. C'è un altro modo per aggiungere un suggerimento in vista dell'anno?

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

dal 1,5 versione, è possibile utilizzare qtip (Io uso anche alticcia ma dovrebbe funzionare con tooltip) per visualizzare un suggerimento su un evento:

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

fonte doc: http://arshaw.com/fullcalendar/docs/event_rendering/eventRender/

spero che questo aiuti

Answer 3

È possibile utilizzare l'attributo titolo html senza alcuna lib di descrizione comandi:

$('#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

Ecco un'altra implementazione

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

---