[REACT] - Issue with Displaying Multiple Tooltips in Child Elements with Bryntum Scheduler Pro

[9ranjeet_prajapati]

Hi Team,

I am currently using Bryntum Scheduler Pro version 5.6.4 and have a requirement to display multiple, distinct tooltips on various child elements. Specifically, these children have been added via renderData.children.push in my eventRenderer method.

My issue is that I'm presently only capable of rendering a single tooltip, and I'm not sure how to adjust my approach to allow for multiple tooltips. I would greatly appreciate any assistance in resolving this issue.

For your reference, I'm using a Bryntum theme based on the example at https://bryntum.com/products/schedulerpro/examples-scheduler/bigdataset-tree/.

Below is my current implementation of the eventRenderer method:

eventRenderer({ eventRecord, renderData }) {
       

    renderData.children.push({
        html: ``,
        className: 'customEventEtd',
        style: {
            'background-color': etdColor,
        }
    });
}

Thank you in advance for your help.

Best regards
Ranjeet Kumar Prajapati

[9ranjeet_prajapati]

I am not able to attached my complete eventRender method implementation

[alex.l]

Hi,

You can specify tooltip for html tag using data-btip
https://bryntum.com/products/gantt/docs/api/Core/widget/Tooltip

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

[9ranjeet_prajapati]

Hi Alex, Thank you for your resolution. I have one more doubt here because my element is a child event. When I mouse over it, both tooltips display at the same time. Is it possible to make it so that when I mouse over an event, it only shows the EventTooltip? And when I mouse over the child area, it only shows that specific tooltip? Below is my code:

renderData.children.push({ html: ``, "data-btip":"Test ", style: { 'background-color': '#939096', position: 'absolute', 'margin-left': '10px', width: '10px', height: '90%', } });

[alex.l]

Hi,

Try to block it before show using this event https://bryntum.com/products/schedulerpro/docs/api/Scheduler/feature/EventTooltip#event-beforeShow for some specific target element attributes in event object.

[Animal]

We can make it so that a normal tooltip hides itself if it goes over a child element of its target which has its own data-btip="Text" attribute: https://github.com/bryntum/support/issues/8768

[9ranjeet_prajapati]

Thanks @Animal and Alex let me check the options