fullcalendar，hover时可点击弹出窗口

我需要像这样一个hover完整日历的弹出窗口。

尝试使用qtip的完整日历，但是当鼠标离开现场时无法通过点击弹出它的disappers。

这是一个类似的例子，但它需要创建一个像上面例子那样的可点击弹出窗口

$(document).ready(function() { var date = new Date(); var d = date.getDate(); var m = date.getMonth(); var y = date.getFullYear(); var events_array = [ { title: 'Test1', start: new Date(2012, 8, 20), tip: 'Personal tip 1' }, { title: 'Test2', start: new Date(2012, 8, 21), tip: 'Personal tip 2' } ]; $('#calendar').fullCalendar({ header: { left: 'prev,next today', center: 'title', right: 'month,agendaWeek,agendaDay' }, selectable: true, events: events_array, eventRender: function(event, element) { element.attr('title', event.tip); } }); }); 

Answer 1

使用Bootstrap工具提示插件http://getbootstrap.com/javascript/#tooltips 。 然后在eventRender里面回调写下面的内容：

  eventRender: function(event, element) { $(element).tooltip({title: event.title}); } 

这会奏效

Answer 2

查看这个例子。 http://jsfiddle.net/craga89/N78hs/

 eventClick: function(data, event, view) { var content = '
'+data.title+'
' + '
Start: '+data.start+'
' + (data.end && '
End: '+data.end+'
' || ''); tooltip.set({ 'content.text': content }) .reposition(event).show(event); } 

它适用于点击，而不是hover，但你也可以调整它以hover工作

Answer 3

 eventMouseover: function(calEvent, jsEvent) { var tooltip = '
' + calEvent.title + '
'; $("body").append(tooltip); $(this).mouseover(function(e) { $(this).css('z-index', 10000); $('.tooltipevent').fadeIn('500'); $('.tooltipevent').fadeTo('10', 1.9); }).mousemove(function(e) { $('.tooltipevent').css('top', e.pageY + 10); $('.tooltipevent').css('left', e.pageX + 20); }); }, eventMouseout: function(calEvent, jsEvent) { $(this).css('z-index', 8); $('.tooltipevent').remove(); }, 

Answer 4

inheritance我的代码

  $(document).ready(function() { // Setup FullCalendar // Setup FullCalendar (function() { var date = new Date(); var d = date.getDate(); var m = date.getMonth(); var y = date.getFullYear(); var tooltip = $('
').qtip({ id: 'fullcalendar', prerender: true, content: { text: ' ', title: { button: true } }, position: { my: 'bottom center', at: 'top center', target: 'mouse', viewport: $('#fullcalendar'), adjust: { mouse: false, scroll: false } }, show: false, hide: false, style: 'qtip-light' }).qtip('api'); $('#fullcalendar').fullCalendar({ editable: true, height: 600, header: { left: 'title', center: '', right: 'today prev,next' }, eventMouseover : function(data, event, view) { var content = '
'+data.title+'
' + '
Start: '+data.start+'
' + (data.end && '
End: '+data.end+'
' || ''); tooltip.set({ 'content.text': content }) .reposition(event).show(event); }, dayClick: function() { tooltip.hide() }, eventResizeStart: function() { tooltip.hide() }, eventDragStart: function() { tooltip.hide() }, viewDisplay: function() { tooltip.hide() }, events: [ { title: 'All Day Event', start: new Date(y, m, 1) }, { title: 'Long Event', start: new Date(y, m, d-5), end: new Date(y, m, d-2) }, { id: 999, title: 'Repeating Event', start: new Date(y, m, d+4, 16, 0), allDay: false }, { title: 'Meeting', start: new Date(y, m, d, 10, 30), allDay: false }, { title: 'Birthday Party', start: new Date(y, m, d+1, 19, 0), end: new Date(y, m, d+1, 22, 30), allDay: false } ] }); }()); });  

Answer 5

我在Shopify中执行此操作，jQuery已经处于活动状态。

我下载了bootstrap Tooltip插件但实际上更喜欢使用popover插件。

链接到必要的引导程序CSS和JS文件后，我有以下内容。 如果您更喜欢使用工具提示，那就是我曾经使用过的工具，但我更喜欢使用popover来评论它。

 $(document).ready(function() { $('#calendar').fullCalendar({ defaultView: 'month', //eventBackgroundColor: 'red', //weekends: false, eventTextColor: '#FFFFFF', hiddenDays: [ 0 ], header: { left: 'prev,next', center: 'title', right: 'month,basicWeek,' }, // eventRender: function(event, element) { // $(element).tooltip({title: event.description}); // }, eventRender: function(event, element) { $(element).popover({title: event.title, content: event.description, trigger: 'hover', placement: 'auto right', delay: {"hide": 300 }}); }, googleCalendarApiKey: 'XXXXXX', eventSources: [ {//BEGINNERS ACTING FUN googleCalendarId: 'XXXXX', color: '#990000', // an option! }, {//INTERMEDIATES SCENE WORK googleCalendarId: 'XXXX', color: 'purple', // an option! }, {//INTERMEDIATES SCENE WORK googleCalendarId: 'XXX', color: 'blue', // an option! }, {// VOICE & COMMUNICATION SKILLS googleCalendarId: 'XXXX', color: 'green', // an option! } ] }); }); 

Answer 6

  $(document).ready(function() { // Setup FullCalendar // Setup FullCalendar (function() { var date = new Date(); var d = date.getDate(); var m = date.getMonth(); var y = date.getFullYear(); var tooltip = $('
').qtip({ id: 'fullcalendar', prerender: true, content: { text: ' ', title: { button: true } }, position: { my: 'bottom center', at: 'top center', target: 'mouse', viewport: $('#fullcalendar'), adjust: { mouse: false, scroll: false } }, show: false, hide: false, style: 'qtip-light' }).qtip('api'); $('#fullcalendar').fullCalendar({ editable: true, height: 600, header: { left: 'title', center: '', right: 'today prev,next' }, eventMouseover : function(data, event, view) { var content = '
'+data.title+'
' + '
Start: '+data.start+'
' + (data.end && '
End: '+data.end+'
' || ''); tooltip.set({ 'content.text': content }) .reposition(event).show(event); }, dayClick: function() { tooltip.hide() }, eventResizeStart: function() { tooltip.hide() }, eventDragStart: function() { tooltip.hide() }, viewDisplay: function() { tooltip.hide() }, events: [ { title: 'All Day Event', start: new Date(y, m, 1) }, { title: 'Long Event', start: new Date(y, m, d-5), end: new Date(y, m, d-2) }, { id: 999, title: 'Repeating Event', start: new Date(y, m, d+4, 16, 0), allDay: false }, { title: 'Meeting', start: new Date(y, m, d, 10, 30), allDay: false }, { title: 'Birthday Party', start: new Date(y, m, d+1, 19, 0), end: new Date(y, m, d+1, 22, 30), allDay: false } ] }); }()); });