Custom Dependency Tooltip

[tso]

Hello,

I am unable to provide a custom tooltip template for dependencies. The documentation mentions a configuration, but I found no way to change the template used, https://www.bryntum.com/docs/gantt/#Scheduler/feature/Dependencies#config-tooltip.

We need to create a custom tooltip in order to show some underlying data (e.g. our own classification of constraints, not-earlier-than etc.).

I am looking for a feature exactly like https://www.bryntum.com/docs/gantt/#Gantt/feature/TaskTooltip#config-template, just for dependencies.

Also: is it possible to extend the "hitbox" for the dependency? On firefox I have to hit the dependency line pretty much pixel-perfect for the tooltip to show.

Thanks!

[Maxim Gorkovsky]

Hello.
I see how it can be difficult to customize the tooltip. I opened a ticket to adopt more friendly approach: https://app.assembla.com/spaces/bryntum/tickets/9392-make-dependency-tooltip-as-customizable-as-tasktooltip/details

I see several solutions so far:
1. Read tooltip doc, provide config with getHtml method which will resolve dependency from the element (reading attributes on the DOM element) and return HTML.
2. Override private method on the feature and do same but with some help:
https://www.bryntum.com/docs/gantt/#Common/mixin/Override

import {Dependencies} from 'bryntum-gantt'; // or sources, if you have them

class DependencyOverride {
  static get target() {
    return {
      class: Dependencies
    }
  }

  getHoverTipHtml({ forElement }) {
      const dependency = this.getDependencyForElement(forElement),
        fromEvent = dependency.fromEvent,
        toEvent = dependency.toEvent;
        
      // generate html here and return it
      
      return `<div>tip</div>`
  }
}
Override.apply(DependencyOverride);

I must note that overriding private method is prone to errors during upgrading to future versions.

Also: is it possible to extend the "hitbox" for the dependency? On firefox I have to hit the dependency line pretty much pixel-perfect for the tooltip to show.

Tooltip reacts to hover event from the dependency element, so one way would be to make dependency element bigger in firefox. Try smth like:

.b-firefox svg .b-sch-dependency {
  stroke-width: 2;
}

[tso]

Hi Maxim,

Thanks for the swift reply and thanks for tracking the issue.

I can confirm that the provided `DependencyOverride` works as expected, thanks! We will keep an eye out for a better solution where we don't have to override private methods.