Our state of the art Gantt chart


Post by ringsy »

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 .

tooltip_location.png
tooltip_location.png (25.1 KiB) Viewed 495 times

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

Post by alex.l »

Hi ringsy,

What the project are we talking about? Make sure your html template has no errors, as example, try to remove all the logic inside and use a simple HTML to test. I tested it in the Scheduler using an example from here viewtopic.php?f=44&t=12306&p=65307#p65291 and it works well to me.

All the best,
Alex


Post by ringsy »

Hi Alex,
When the bar is long we are facing this problem , when the red bar is small it is showing on the red bar correctly.


Post by alex.l »

Ok, I see. Try to set https://bryntum.com/docs/scheduler/api/Core/widget/Tooltip#config-anchorToTarget to false.

new Tooltip({
                    anchorToTarget : false,
                    hoverDelay     : 1500,
                    forSelector    : '.b-sch-resourcetimerange',

All the best,
Alex


Post by ringsy »

hi, tried setting anchorToTarget to false is working , but the anchor is not visible.


Post by alex.l »

Not sure I got what you meant. Please explain it a bit more. I tried it with our online examples, all works good to me.

All the best,
Alex


Post by ringsy »

the anchor symbol that comes as we hover is missing in this


Post by alex.l »

Well, yes. This is how it works. There are 2 modes to show a tooltip: static/anchored to target - with "anchor symbol", and dynamic, following by cursor. For huge/wide HTML elements I suggest you to use anchorToTarget : false to have correct positioning for the tooltips.

We have a feature request to have this build-in https://github.com/bryntum/support/issues/1069
But for now this is the only way to go.

All the best,
Alex


Post by ringsy »

Okay Thanks


Post by Animal »

I am just guessing from the look of your screenshot, but it looks like the tooltip is "working".

The event bar is very long and extends off the left side of the TimeAxisSubGrid, and the tooltip is "correctly" aligned to its center.

The tooltip has to be told that the target it is aligned to may be clipped by certain elements.

Try configuring your Tooltip with

clippedBy : [myScheduler.timeAxisSubGridElement, myScheduler.bodyContainer]

It needs two because the Y and X scrolling are on different elements.

The Grid's (or Scheduler's) bodyElement scrolls vertically. Each SubGrid may be very tall.

Each SubGrid handles its own horizontal scrolling.

So the tooltip has to be told both clipping elements.


Post Reply