Premium support for our pure JavaScript UI components


Post by kkn1234 »

I want to have tooltip for each section in the event not for the whole event. Could you please assist with this. As shown in the screenshot attached.

Attachments
event-tooltip for  each section.PNG
event-tooltip for each section.PNG (19.16 KiB) Viewed 168 times

Post by alex.l »

Hi,

The way to reach this is to disable eventTooltip feature and set https://bryntum.com/products/gantt/docs/api/Core/widget/Tooltip for each or html element you need, as example with data-tip property

<button class="my-button" data-btip="Contextual help for my button" data-btip-scroll-action="realign">Hover me</button>

or forSelector

new Tooltip({
    forSelector : '.myCssClass',
    getHtml     : ({ source : tip }) => AjaxHelper.fetch('data').then(response => response.text())
});

using https://bryntum.com/products/gantt/docs/api/Scheduler/view/mixin/SchedulerEventRendering#config-eventRenderer

All the best,
Alex


Post by kkn1234 »

I have implemented tooltip using tooltip widget, facing issue while loading remote data, the api is getting called multiple times when we hover over the event.

 eventRenderer = ({ eventRecord }: { eventRecord: any }): string => {
        new Tooltip({
            forSelector : '.taskTooltip',
            getHtml     : (data) => {
                console.log(eventRecord)
                const tooltip = this.genttEventTooltip(eventRecord['originalData']);
                    return tooltip;
            }
        });
      return `
          <div class="switchOverTooltip" style="width: ${eventRecord.originalData.switchoverWidth}; background-color: rgb(115, 63, 70)" ></div>
          <div class="taskTooltip" style="width: ${eventRecord.originalData.setupWidth}; background-color: rgb(70, 39, 56)"></div>
          <div class="taskTooltip" style="width: ${eventRecord.originalData.taskWidth}; background-color: rgb(255, 0, 0)"></div>

  <div style="position: absolute; width: 100%; left: ${eventRecord.originalData.switchoverWidth}">
    <div>${eventRecord.originalData.name}</div>
    <div>${eventRecord.originalData.desc}</div>
  </div>
 `;
};
[code]
<bryntum-scheduler-pro
    #schedulerpro
    [startDate]="displayStartDate"
    [endDate]="displayEndDate"
    [columns]="schedulerProConfig.columns"
    [project]="project"
    [eventRenderer]="eventRenderer"
    [dependenciesFeature]="schedulerProConfig.features.dependencies"
    (onEventClick)="onEventClick($event)"
    [nestedEventsFeature]="schedulerProConfig.features.nestedEvents"
    [rowHeight]="verticalZoomLevel"
    [timeRangesFeature]="schedulerProConfig.features.timeRanges"
    [treeFeature]="schedulerProConfig.features.tree"
    [eventTooltipFeature]="schedulerProConfig.features.eventTooltip"
    
</bryntum-scheduler-pro> [code] features : { eventTooltip : { disabled: true },
Attachments
tooltip-widget.PNG
tooltip-widget.PNG (229.16 KiB) Viewed 156 times

Post by mats »

Can you please provide a small test case for us?


Post by Animal »

It will be called multiple times.

You are creating multiple Tooltips.

Every time an event is rendered (which with virtual rendering, and updates on change etc will be many), you instantiate a new tooltip!

You only need one.


Post by kkn1234 »

Hi,
Thanks for the response, wanted to check then how to have tooltip for each section in the event as attached in the screenshot

Attachments
event-tooltip for  each section.PNG
event-tooltip for each section.PNG (19.16 KiB) Viewed 152 times

Post by alex.l »

Hi,

You do not need to create Tooltip instance in renderer, register it outside of renderer. In renderer you can add data-tip to your html template

All the best,
Alex


Post by kkn1234 »

HI Alex,

 Thanks for the response, could you please share me an example (in angular). It would really help a lot.

Post by kkn1234 »

Also please guide how to register tooltip outside of renderer and how to use data-tip in the html template.


Post by alex.l »

Hi,

Thanks for the response, could you please share me an example (in angular). It would really help a lot.

Also please guide how to register tooltip outside of renderer

As example, put your code into ngAfterViewInit.

ngAfterViewInit(): void {
new Tooltip({
            forSelector : '.taskTooltip',
            getHtml     : (data) => {
		// your code
            }
        });

}

and how to use data-tip in the html template.

I posted example code, above and we have it in docs.

<button class="my-button" data-btip="Contextual help for my button" data-btip-scroll-action="realign">Hover me</button>

For event it will be just the same

// Render icons representing the equipment assigned to the task
const eventRenderer = ({ eventRecord }) => {
    const event = eventRecord;
    return `<div class="b-event-name">${StringHelper.encodeHtml(event.name || '')}</div>
            <ul class="b-event-equipment-wrap">
                ${event.equipment.map((equipment) => `<li data-btip="${StringHelper.encodeHtml(equipment.name)}"
                class="${equipment.iconCls}"></li>`).join('')}
            </ul>`;
};

All the best,
Alex


Post Reply