你的方向是对的。我做了一些类似的事情，在日程视图中的事件底部显示事件结束时间。

日历选项：

eventMouseover: function(event, jsEvent, view) {
    $('.fc-event-inner', this).append('<div id=\"'+event.id+'\" class=\"hover-end\">'+$.fullCalendar.formatDate(event.end, 'h:mmt')+'</div>');
}

eventMouseout: function(event, jsEvent, view) {
    $('#'+event.id).remove();
}

悬停的CSS：

.hover-end{padding:0;margin:0;font-size:75%;text-align:center;position:absolute;bottom:0;width:100%;opacity:.8}

希望这对你有帮助！

没有 Bootstrap ，甚至更简单地添加只是浏览器工具提示与

eventRender : function(event, element) {
   element[0].title = event.title;
}

如果你正在使用bootstrap，这是一个非常优雅的解决方案：

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

（我从这个答案中得到：https://stackoverflow.com/a/27922934/2941313）

对我来说，这是我所做的，因为我需要修改其他伟大的答案。
HTML：

(eventRender)="addHoverTitle($event)"

组件：

addHoverTitle(args: any): void {
   args.el.title = args.event.title;
}

在FullCalendar版本4中，只有一个参数：eventRender：function（info），所以代码段是：
使用Bootstrap

eventRender: function (info) {
  $(info.el).tooltip({ title: info.event.title });
}

如果您使用的是fullcalendar版本5：
eventMouseEnter：function（info）{el.title = info.event.start;}，

如果您使用的是Angular
Html：

<full-calendar 
 ...
 (eventLeave)="eventLeave($event)">
</full-calendar>

typescript ：

eventRender($event) {
  $event.el.title = $event.event.title;
}

在日历选项中，我为我的angular项目使用了这个：

eventMouseEnter: function (calEvent) {
    calEvent.el.title = calEvent.event.title;
},

eventDidMount: function(info) {
                if(info.view.type!='timeGridDay'){
                    $(info.el).tooltip({ title: info.event.title });    
                }
            }

对于v4，我们可以使用“eventRender”https://fullcalendar.io/docs/v4/eventRender
对于v5、v6，我们可以使用“eventDidMount”https://fullcalendar.io/docs/event-object