I've been working on integrating tooltips for each event within a FullCalendar resource timeline. However, I'm facing an issue where the tooltips are getting obscured by neighboring events. To provide more context, two screenshots illustrating the tooltip visibility (covered/shown) can be viewed here:
https://i.sstatic.net/XVskb.png
https://i.sstatic.net/xbjDr.png
Below are the source files of the Angular component (resource-timeline).
resource-timeline.component.html
<div class="container-fluid mt-2" style="padding-left: 1%; padding-right: 1%">
<div>
<div class="row">
<div class="col-xl-12 col-md-12 col-sm-12">
<div class="p-3">
<full-calendar #resourceTimeline [options]="resourceTimelineOptions"></full-calendar>
</div>
</div>
</div>
</div>
</div>
resource-timeline.component.scss:
.timeline-tooltip {
background-color: cornflowerblue;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px;
position: absolute;
z-index: 9999;
width: 120px;
word-wrap: break-word;
top: 100%;
left: 50%;
margin-left: -60px;
&::after {
content: "";
position: absolute;
bottom: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent transparent black transparent;
}
}
resource-timeline.component.ts:
import {Component, ElementRef, OnInit, Renderer2, ViewChild} from '@angular/core'
import {CalendarOptions, EventContentArg, FullCalendarComponent} from "@fullcalendar/angular"
import resourceTimelinePlugin from '@fullcalendar/resource-timeline'
import {ActivatedRoute, Router} from '@angular/router'
import {EventHoveringArg} from "@fullcalendar/common"
@Component({
selector: 'resource-timeline',
templateUrl: './resource-timeline.component.html',
styleUrls: ['./resource-timeline.component.scss']
})
export class ResourceTimelineComponent implements OnInit {
@ViewChild('fc-timeline-event.fc-event-start', {static: false}) calendarEvent: ElementRef
toolTipDiv: ElementRef
@ViewChild('resourceTimeline')
calendar: FullCalendarComponent
resourceTimelineOptions: CalendarOptions = {
// Calendar options and configurations
}
constructor(private router: Router,
private activatedRoute: ActivatedRoute,
private renderer: Renderer2,
private domElement: ElementRef) {
}
ngOnInit(): void {
// Initialize resources and events
this.resourceTimelineOptions.resources = [
// Resources data
]
this.resourceTimelineOptions.events = [
// Events data
]
}
// Tooltip handling methods
}
The positioning and z-index adjustments have been tried with no direct solution to the problem encountered. If anyone has insights on resolving this issue, your assistance would be greatly appreciated!