Jquery 年视图中完整日历的工具提示

我想在年视图中添加完整日历的工具提示。我尝试了下面的一个，但它增加了月视图的工具提示。我尝试了谷歌，但没有找到任何与此相关的东西。是否有其他方法可以在“年度视图”中添加工具提示

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

---

从1.5版开始，您可以使用qtip（我也使用tipsy，但它应该与工具提示一起使用）来显示事件提示：

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

文件来源：

希望这有帮助

eventMouseover:function（calEvent，jsEvent）{
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();
},

变量工具提示=“”+calEvent.title+“”；
var$tooltip=$（tooltip）.appendTo（'body'）；
$（此）.mouseover（函数（e）{
$（this.css（'z-index'，10000）；
$tooltip.fadeIn（'500'）；
$tooltip.fadeTo（'10'，1.9）；
}).mousemove（函数（e）{
$tooltip.css（'top'，e.pageY+10）；
$tooltip.css（'left'，e.pageX+20）；
});
},
eventMouseout：函数（calEvent、jsEvent）{
$（this.css（'z-index'，8）；
$（'.tooltipevent'）.remove（）；
},

您可以在不使用任何工具提示库的情况下使用html标题属性：

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

---

这里是另一个实现

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

eventMouseover:function（calEvent，jsEvent）{var-tooltip='Title:'+calEvent.Title+''；var$tool=$（tooltip）.appendTo（'body'）；
$（此）.mouseover（函数（e）{
$（this.css（'z-index'，10000）；
$tool.fadeIn（'500'）；
$tool.fadeTo（'10'，1.9）；
}).mousemove（函数（e）{
$tool.css（'top'，例如pageY+10）；
$tool.css（'left'，e.pageX+20）；
});
},
eventMouseout：函数（calEvent、jsEvent）{
$（this.css（'z-index'，8）；
$（'.tooltipevent'）.remove（）；
},

---

---

由于fullcalendar已根据更改了最新版本中的事件，因此我将更改事件，并提供更详细的答案

弹出窗口如下所示

它不需要任何js或css插件

您可以使用一个或多个对象来更改事件数据或负载，以获得工具提示，并在类似js的应用程序中使用它

        events: [
        {
            title: 'My Event',
            start: '2019-01-01',
            popup: {
                title: 'This is the title',
                descri: 'This is the description',
            }
        }
        // more events here
        ],
        eventMouseEnter: function(info) {
            var tis=info.el;
            var popup=info.event.extendedProps.popup;
            var tooltip = '<div class="tooltipevent" style="top:'+($(tis).offset().top-5)+'px;left:'+($(tis).offset().left+($(tis).width())/2)+'px"><div>' + popup.title + '</div><div>' + popup.descri + '</div></div>';
            var $tooltip = $(tooltip).appendTo('body');

//            If you want to move the tooltip on mouse movement then you can uncomment it
//            $(tis).mouseover(function(e) {
//                $(tis).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);
//            });
        },
        eventMouseLeave: function(info) {
            console.log('eventMouseLeave');
            $(info.el).css('z-index', 8);
            $('.tooltipevent').remove();
        },

---

这还添加了月视图中的工具提示，年视图中未发生任何事情：（如何获得年度视图？文档中定义了可用视图。由于应使用jQuery 1.6 prop（）：

element.prop（“title”，event.title））

很好的帮助！效果很好。对于那些使用较新版本的fullcalendar的人，有一个工具提示功能可能也会有帮助：它允许在工具提示中显示更多细节。请将“var$tootlip”更改为“var$tooltip”。谢谢你的示例。请像charmContext一样工作？这是在

$（“#calendar”）。fullcalendar（{}）

或部分

'renderEvent'

您好@jafarbtech，您的代码工作正常，谢谢。

.tooltipevent{
    width:200px;/*
    height:100px;*/
    background:#ccc;
    position:absolute;
    z-index:10001;
    transform:translate3d(-50%,-100%,0);
    font-size: 0.8rem;
    box-shadow: 1px 1px 3px 0px #888888;
    line-height: 1rem;
}
.tooltipevent div{
    padding:10px;
}
.tooltipevent div:first-child{
    font-weight:bold;
    color:White;
    background-color:#888888;
    border:solid 1px black;
}
.tooltipevent div:last-child{
    background-color:whitesmoke;
    position:relative;
}
.tooltipevent div:last-child::after, .tooltipevent div:last-child::before{
    width:0;
    height:0;
    border:solid 5px transparent;/*
    box-shadow: 1px 1px 2px 0px #888888;*/
    border-bottom:0;
    border-top-color:whitesmoke;
    position: absolute;
    display: block;
    content: "";
    bottom:-4px;
    left:50%;
    transform:translateX(-50%);
}
.tooltipevent div:last-child::before{
    border-top-color:#888888;
    bottom:-5px;
}