Hi,
The tooltip is shown on the grid side on a non working hour place .
the red bar represent the non working hours , belongs to
.b-sch-resourcetimerange
class.
We have given a tooltip over it ,which not shown over the bar instead is shown on grid side.
As shown in the image attached .
also attached the code below
bryntumRefs.current.dueiconTooltip = new Tooltip({
hoverDelay: 150,
hideDelay: 100,
forSelector: ".b-sch-resourcetimerange",
cls: "tooltip-style",
getHtml: (item) => {
let { tip, element, activeTarget, event } = item;
let resource = activeTarget.elementData.resource;
let start = activeTarget.elementData.start;
let end = activeTarget.elementData.end;
let intervals = resource.calendar.getIntervals();
let checkstart = false;
let intervalArray = [];
if (intervals != null && intervals.length > 0) {
intervals.map((o) => {
if (o.startDate != null && o.endDate != null) {
checkstart = DateHelper.betweenLesserEqual(
start,
DateHelper.parse(o.startDate),
DateHelper.parse(o.endDate)
);
if (checkstart) {
intervalArray.push(o);
}
}
});
}
if (intervalArray.length > 0 && resource.type == "Aircraft") {
if (intervalArray[0].type == "package") {
let percentage =
intervalArray[0].percentage == null
? 0
: parseInt(intervalArray[0].percentage);
let wstask =
intervalArray[0].wstask == null ? "" : intervalArray[0].wstask;
return `<div class="maintanance_popup_name">${
intervalArray[0].name
}</div>
<div class="maintanance_popup_startdate" style="color: #3E4956;">
${intervalArray[0].startDate}-${intervalArray[0].endDate}
</div>
<div class="maintanance_popup_station">${
intervalArray[0].packageduedesc
}</div>
<div class="maintanance_popup_crew">
Act.Start Date
<br />${startdate}
</div>
<div class="maintanance_popup_crew">
Proj.End Date
<br />${enddate}
</div>
`;
}
}
},
});