Angular 6 fullCalendar Display popover on mouseover event

Question

I'm using fullCalendar in an Angular 6 application. I want to display fullcalendar popover while hovering over an event like this. I want to achieve this via my ts file without using jquery. Here's my code.

HTML:

 <section class="main-content">
  <div *ngIf="calendarOptions">
   <ng-fullcalendar #ucCalendar 
    [options]="calendarOptions" 
    [(eventsModel)]="events"
    (eventClick)="handleClick($event.detail.event.data)"
    (eventMouseOver)="mouseOver($event, calendarPopover)">
    </ng-fullcalendar>
   </div>
 </section>

 <ng-template #calendarPopover>
    <h3>{{toolData .title}}</h3>
  </ng-template>

TS File:

mouseOver(event, content){
    var data = event.detail.event.data;
    this.toolData = data;
    console.log(this.toolData);
  }

Similar to a post here

I want to get the ng-template to open up on display. I have tried ngbPopover but unlike ngbModal, ngbPopover doesn't have an open method that would simply open up the popover by calling it's method since it's a directive.

If anyone knows any solution using either the fullCalendar popover method (without jquery) or displaying via ng-template, any help in this regard would be appreciated.

Answer 1

I am using this solution for my Angular 10 app, with FullCalendar 5.3. The library tippy.js was very easy to integrate and use - https://atomiks.github.io/tippyjs/

No extra tooltip html elements needed. Just use the fullcalendar eventDidMount render hook to add a tippy tooltip to your events:

import tippy from "tippy.js";
...
ngAfterViewInit() {
// create calendar and configure it

eventDidMount: (info) => {
  tippy(info.el, {
   content: 'Content to display inside tooltip',
   })
 }
}

If you want to display dynamic content inside your tooltip you can, for example, set it to your event's title by using

eventDidMount: (info) => {
  tippy(info.el, {
   content: info.event.title,
   })
 }
}

There is no more code needed. The tooltip is added to your event on hovering. If you want to adjust the styling of the tooltip you can use the class .tippy-box. For example, I changed it to mostly match Angular Material's Mat-Tooltip. Just added the style to my component's .css file.

.tippy-box {
  color: #fff;
  border-radius: 4px;
  padding: 3px;
  overflow: hidden;
  text-overflow: ellipsis;
  background: rgba(97, 97, 97, .9);
  font-family: Roboto, sans-serif;
  font-size: 1rem;
}